alignment problems when using relative

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>