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

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

thank you dsonesuk for your invaluable information. i used your second idea and it worked like a charm. i only needed to specify the png img element properties as suggested above. thus my <td></td> looked like this:<td><img src="images/brush-bg.png" height="497" width="459" style="position:absolute; z-index:10; left:0; top:0;" /><img src="images/image1-large.jpg" width="459" height="497" alt="image" /></td>.Thank youRegards,James

i have a simple table data cell <td> and i have 2 same-sized images i need to put in there, the first image is the <td> background image (which is a transparent png that has a grunge border) and the second image is just a regular JPG. Whenever i just add the <td background="images/bg.png> background PNG image and add the JPG image inside of the <td></td>, you cannot see the background PNG. I need to make the background PNG float over the top of the JPG image. I have tried playing around with z-index and css styles, etc but i cannot seem to make it work. Any help would be appreciated. I have attached 3 images, the brush-bg.png background image, the JPG image, and lastly a JPG of what i want it to look likeRegards,James