css layout problem using div tags

[sheproc]

Hi,Am having a little trouble creating 2 divs so they are side by side inside a container with set width. The HTML looks like this:<div id="contenttop"></div><div id="contentmiddle"><div class="set-size"><div class="column-580 float-left">sfhsfhs</div><div class="column-400 float-right">sfhsfh</div></div></div><div id="contentbottom"></div> and the CSS is as follows/*<-- column system settings -->*/.set-size {width:980px;margin:0 auto;}.column-580 {width:580px;}.column-400 {width:400px;}/*<-- content -->*/#contenttop { background: url(../images/content_top.png) no-repeat; width: 980px; height: 30px; margin-top:9px;}#contentmiddle { background: url(../images/content_middle.png) repeat-y;}#contentbottom { background: url(../images/content_bottom.png) no-repeat; width:980px; height:30px;} however for some reason the divs dont seem to go side by side, but undernaeah each other. Basically, i want to have one div on the left hand side with some content (the 580px size div) and the other div with content on the right hand side (the 400px size div) Have inserted a picture of how it looks within dreamweaver and you can see the divs are not side-by-side, but go underneath each other. Any help would be greatly appreciated. Regards,James

[sheproc]

ok, after fiddeling around with the CSS, i managed to get it working. I forgot to add the .float-left {float:left !important;} (and the right) within the CSS. I also removed the background of the contentmiddle repeat section (which was a PNG of 980wide by 10px high) in both the CSS and HTML and added a background left (520px wide and 10px high) and right (460px wide and 10px high) into each. Thus my HTML now looks like: <div id="contenttop"></div><div class="set-size"><div class="column-490 float-left">sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs</div><div class="column-400 float-right">sfhsfhsfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs</div></div><div class="clear"></div><div id="contentbottom"></div> and the CSS looks like: /*<-- column system settings -->*/.float-left {float:left !important;}.float-right {float:right !important;}.set-size {width:980px;margin:0 auto;}.column-490 {width:490px;}.column-400 {width:400px;}/* additional stylization of 980 grid system columns */.column-490.float-left { padding-left:30px; background:url(../images/content_left.png) repeat-y;}.column-400.float-right { padding-right:30px; padding-left:30px; background:url(../images/content_right.png) repeat-y;}/*<-- content -->*/#contenttop { background: url(../images/content_top.png) no-repeat; width: 980px; height: 30px; margin-top:9px;}.clear{clear:both;font-size:0;line-height:0;display:block;}#contentbottom { background: url(../images/content_bottom.png) no-repeat; width:980px; height:30px;} And the resulting layout image looks like this: (see pic below)My question now is, if i have different sized content in either the left on right div, how do i automatically make sure the background PNG fills the entire section of whichever is the smaller, until it reaches the class <clear> tag. Regards,James