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>

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..

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

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.

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>

made it a bit simpler,
(note it the code you pasted in the last post, most of the image-tags wasn't closed.)

cheers
andy