#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12

    help with CSS ... divs jump to next line


    Hi

    I am having problems when using relative divs in CSS

    the items on the right keep jumping down to the next line.

    i have included an image of what it looks like, i wanted to make it so that the items on the right were aligned with those on the left. the left always stays fixed width but the right is dyamic depending on content.

    any suggestions?

    Cheers

    PS the code is as follows

    html, body{
    margin:0;
    padding:0;
    }

    #topleft {
    position: relative;
    width: 180px;
    left: 12px;
    height: 23px;
    z-index: 1;
    vertical-align: middle;
    background-color: red;
    }

    #topright {
    position: relative;
    left: 192px;
    height: 23px;
    z-index: 2;
    vertical-align: middle;
    background-color: green;
    }
    #topleftwhite {
    width: 180px;
    position: relative;
    left: 12px;
    height: 23px;
    z-index: 3;
    vertical-align: middle;
    background-color: blue;
    }

    #toprightblue {
    position: relative;
    left: 192px;
    height: 23px;
    z-index: 4;
    vertical-align: middle;
    background-color: orange;
    }

    #leftmenu {
    position: relative;
    left: 12px;
    width: 180px;
    height: 23px;
    z-index: 5;
    vertical-align: middle;
    background-color: pink;
    }

    #rightcontent {
    position: relative;
    left: 192px;
    height: 23px;
    z-index: 6;
    vertical-align: middle;
    background-color: yellow;
    }

    #whitebottomleft {
    position: relative;
    width: 180px;
    left: 12px;
    height: 23px;
    z-index: 7;
    vertical-align: middle;
    background-color: gray;
    }

    #bluerightbottom {
    position: relative;
    left: 192px;
    height: 23px;
    z-index: 8;
    vertical-align: middle;
    background-color: black;
    }

    #blueleftbottom {
    position: relative;
    width: 180px;
    left: 12px;
    height: 23px;
    z-index: 9;
    vertical-align: middle;
    background-color: #FF33FF;

    }

    #whiterightbottom {
    position: relative;
    left: 192px;
    height: 23px;
    z-index: 10;
    vertical-align: middle;
    background-color: #996600;
    }


    HTML

    <div id="topleft">topleft</div>
    <div id="topright">middletop</div>
    <div id="topleftwhite">tleftcorner</div>
    <div id="toprightblue">bluetop</div>
    <div id="leftmenu">menu</div>
    <div id="rightcontent"> content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </div>
    <div id="whitebottomleft">bleftcorner</div>
    <div id="bluerightbottom">bluebottom</div>
    <div id="blueleftbottom">bottomleft</div>
    <div id="whiterightbottom">middlebottom</div>
    Attached Images
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    use float:left on the elements on the left,
    then use margin-left instead of position left on the elements on the right.

    #topleft {
    float:left;
    position: relative;
    width: 180px;
    left: 12px;
    height: 23px;
    z-index: 1;
    vertical-align: middle;
    background-color: red;
    }

    #topright {
    position: relative;
    margin-left: 192px;
    height: 23px;
    z-index: 2;
    vertical-align: middle;
    background-color: green;
    }

    etc..
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12
    thanks for that, but i tried that before and it fixes it aslong as its full screen but when its resized it messes up, im trying to get it to look like the attached pic, where the red boxes drawn on are the differnt divs. ive got a version that works perfect in mozilla but dies in opera and IE6

    cheers
    A
    Attached Images
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    by the look of that picture, it looks like you got a couple of div's too many,
    making it more complicated than it should be,

    if you got the code for that i might take a look on it.
    Last edited by Akh; April 16th, 2004 at 08:11 AM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12

    code


    if you could take a look it would me very much aprreciated

    Ive copied the code before, someone has looked at it and cant get itto work in in IE or opera as it messes up when resizing.

    cheers


    CSS

    body { /*sets properties for the body of the document*/
    background-color:#ffffff;
    margin:0px 0px 0px 0px;
    }
    #container { /*sets the properties for the container that all the elements are placed in.*/
    margin-top: 50px; /*distance from top of browser window*/
    margin-left: 50px; /*discance from left of browser window*/
    margin-right: 50px; /*distance from right of browser window*/
    margin-bottom: 50px; /*distance from bottom of browser window*/
    padding: 0px; /*padding for the edges of the container*/
    background-color: #66ccff; /*sets the background colour to blue*/
    width: 80%; /*sets the width of the container*/
    min-width: 241px; /*sets the minimum width of the container*/
    }

    #footer { /*sets the properties of the footer container*/
    padding: 0px; /*sets the padding*/
    position: relative; /*sets the position so it is relative to the container its in*/
    background-color: #FFFFFF; /*sets background colour to white*/
    width: 100%; /*sets width to 100% of the container*/
    clear:both; /*clears around the container....vital dont remove it.*/
    }

    #content { /*sets the properties for the content*/
    margin-left: 180px; /*margin from the left of the container...leaves space for leftnav*/
    height: *%; /* sets height of content to fill all availble space*/
    background-color: #66ccff; /* sets background colour to blue*/
    align: right; /*aligns content frame to right of the container*/
    min-height: 250px; /*sets the minimum height for the window...same as bg image for left nav*/
    padding-left: 5px; /*sets the content padding to 5px so there is some space between txt and edge of frame*/
    /*overflow:hidden; can also be set to visible this causes some silly problems*/
    border-left: 2px solid; /* sets the left border.. needed so when the content stretches the border stretches with it*/
    border-color: #663300; /*sets border colour to brown*/
    }

    #leftnav { /*sets properties for the left nav bar*/

    float:left; /* floats the navigation panel on the left of container*/
    background-color : #66ccff; /* sets bg colour to blue*/
    width: 180px; /*sets withd of the left nav*/
    padding-top: 30px; /*sets padding from top of container*/
    border-right: 2px solid; /*sets border so that when nav is extended border continues*/
    border-color: #663300; /*sets border colour to brown*/
    }


    #topleftspace { /*sets properties for the top left space where the rounded corner will go*/
    position: absolute; /*sets positioning for element*/
    background-color: #66ccff; /*sets bg colour to blue*/
    width: 180px; /*sets witdh of element*/
    height: 20px; /*sets height of element*/
    }

    #toprightspace { /*sets propertiese for the top right space where the rounded corner goes.*/
    margin-left: 180px; /*sets positioning for element*/
    background-color: #66ccff; /*sets bg colour to blue*/
    height: 20px; /*sets witdh of element*/
    padding-left:5 px; /*sets height of element*/
    }

    #topleftcorner { /*sets properties for the top left corner...where the gif goes*/
    text-align: left; /*aligns the rounded corner gif*/
    }

    #toprightcorner { /*sets properties for the top left corner...where the gif goes*/
    text-align: right; /*aligns the rounded corner gif*/
    }

    #topleftwhite { /*sets the top white space where text could possibly go*/
    position: absolute; /*sets position*/
    background-color: #FFFFFF; /*sets bg colour to white*/
    width: 180px; /*sets width*/
    height: 30px; /*sets height*/
    border-right: 2px solid; /*sets border*/
    border-color: #663300;/*sets border colour to brown*/
    }

    #toprightwhite { /*sets the top white space where text could possibly go*/
    margin-left: 180px; /*sets margin from the left of the page to cope with topleftwhite*/
    background-color: #FFFFFF; /*sets bg colour to white*/
    height:30px; /*sets height*/
    padding-left:5px; /*sets padding*/
    }

    #bottomleftspace { /*sets the space where the bottom rounded corner goes*/
    position: absolute; /*sets position*/
    background-color: #66ccff; /*sets colour*/
    width: 180px; /*sets width*/
    height :20px; /*sets height*/
    border-right: 2px solid; /*sets border*/
    border-color: #663300; /*sets border colour*/
    }

    #bottomrightspace {/*sets space where rounded corner will go*/
    margin-left: 180px; /*sets left margin to cope with left spaces*/
    background-color: #66ccff; /*sets bg colour*/
    height: 20px; /*sets height*/
    padding-left: 5px; /*sets padding*/
    }

    #bottomleftcorner { /*sets properties for the bottom corner gif*/
    text-align: left; /*aligns the gif*/
    }

    #bottomrightcorner { /*sets properties for the bottom corner gif*/
    text-align: right; /*aligns the gif*/
    }

    #bottomleftwhite { /*sets the white space for the bottom*/
    position: absolute;/*sets position*/
    background-color: #FFFFFF; /*sets the bg colour*/
    width: 180px; /*sets width*/
    height: 30px; /*sets height*/
    border-right: 2px solid; /* sets border*/
    border-color: #663300; /*sets border colour*/
    }

    #bottomrightwhite {/*sets the white space for the bottom*/
    margin-left: 180px; /*sets margin width to cope with left space*/
    background-color: #FFFFFF; /*sets bg colour*/
    height: 30px; /*sets height*/
    padding-left: 5px; /*sets padding*/
    }

    #heading1 { /* sets the main heading properties*/
    font-size: 22px ; /* font size*/
    font-weight: bold; /* font weight*/
    color: black; /* font colour*/
    }

    #contenttext {/*sets content text style*/
    font-size: 12px; /*font size*/
    color: #663300; /*font colour*/
    }

    HTML

    <div id="container">
    <div id="topleftwhite"></div>
    <div id="toprightwhite"></div>

    <div id="topleftspace">
    <div id="topleftcorner"><img src="images/t-left-corner.gif" width="20" height="20"</div>
    </div>


    <div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"> </div>

    <div id="toprightspace"><div id="toprightcorner"><img src="images/t-right-corner.gif" width="20" height="20"</div></div>
    <div id="content"><div id="heading1">Heading 1</div><div id="contenttext"> This is where the content would go This is where the content would go This is where the content would go
    This is where the content would go This is where the content would go This is where the content would go
    This is where the content would go This is where the content would go This is where the content would go
    This is where the content would go This is where the content would go This is where the content would go </div></div>

    <div id="footer">
    <div id="bottomleftspace">
    <div id="bottomleftcorner"><img src="images/b-left-corner.gif" width="20" height="20"</div>
    </div>
    <div id="bottomrightspace">
    <div id="bottomrightcorner"><img src="images/b-right-corner.gif" width="20" height="20"</div>
    </div>
    <div id="bottomleftwhite"></div>
    <div id="bottomrightwhite"></div>
    </div>







    </div>
  10. #6
  11. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    made it a bit simpler,
    (note it the code you pasted in the last post, most of the image-tags wasn't closed.)

    Code:
    <!DOCTYPE html
         PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title> no title </title>
    <link href="none.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    @import url(none.css);
    
    body { /*sets properties for the body of the document*/
    	background-color:#ffffff;
    	margin:0px 0px 0px 0px;
    }
    
    #container { /*sets the properties for the container that all the elements are placed in.*/
    	margin: 50px 50px 0;
    	padding: 0px; /*padding for the edges of the container*/
    	background-color: #66ccff; /*sets the background colour to blue*/
    	width: 80%; /*sets the width of the container*/
    	min-width: 241px; /*sets the minimum width of the container*/
    }
    
    #footer {
    	padding: 0px; /*sets the padding*/
    	margin:0 50px;
    	position: relative; /*sets the position so it is relative to the container its in*/
    	background:url(images/b-right-corner.gif) #66ccff 100% 0% no-repeat;
    	width: 80%;
    	height:20px;
    }
    
    #footer div{
    	border-right: 2px solid #663300; /*sets border*/
    	width:180px;
    }
    
    #leftnav {
    	float:left;
    	background:url(images/t-left-corner.gif) #66ccff 0% 0% no-repeat;
    	width: 180px;
    	padding-top: 30px;
    	border-right: 2px solid #663300; /*sets border so that when nav is extended border continues*/
    
    }
    
    #content { /*sets the properties for the content*/
    	margin-left: 180px; /*margin from the left of the container...leaves space for leftnav*/
    	height: *%; /* sets height of content to fill all availble space*/
    	background:url(images/t-right-corner.gif) #66ccff 100% 0% no-repeat;
    	min-height: 250px; /*sets the minimum height for the window...same as bg image for left nav*/
    	padding: 30px 5px 5px;
    	/*overflow:hidden; can also be set to visible this causes some silly problems*/
    	border-left: 2px solid #663300; /*sets border so that when nav is extended border continues*/
    
    }
    
    
    
    #content h1 { /* sets the main heading properties*/
    	font-size: 22px ; /* font size*/
    	font-weight: bold; /* font weight*/
    	color: black; /* font colour*/
    
    }
    
    #content p {/*sets content text style*/
    	font-size: 12px; /*font size*/
    	color: #663300; /*font colour*/
    }
    
    -->
    </style>
    
    </head>
    <body>
    <div id="container">
    
    	<div id="leftnav">
    		<img src="images/home-menu.gif" width="179" height="251" alt="" />
    	</div>
    
    	<div id="content">
    
    		<h1>Heading 1</h1>
    		<p> This is where the content would go This is where the content would go
    		This is where the content would go This is where the content would go
    		This is where the content would go This is where the content would go
    		</p>
    		<p>
    		This is where the content would go This is where the content would go
    		This is where the content would go This is where the content would go
    		This is where the content would go This is where the content would go
    		</p>
    
    	</div>
    </div>
    
    <div id="footer">
    		 <div><img src="images/b-left-corner.gif" width="20" height="20" alt="" /></div>
    </div>
    
    
    </body>
    </html>
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12
    cheers
    andy
    Last edited by agmogg; April 20th, 2004 at 05:16 AM.

IMN logo majestic logo threadwatch logo seochat tools logo