Any CSS gurus that can help me solve this one?
I want to build a new product detail page - width of the page is 980px. There are no side menus.
I want it to look like this, but not to scale:
http://www.carpeperdiem.us/xcartforum/3divs-in-a-boat.png
I have tried this:
CSS
==========
#abc-container {width: 980px; position:relative; z-index: -30; padding: 12px; }
#div-a {width: 300px; position:relative; z-index: 1; float:left; margin: 0 20px 20px 0; }
#div-b {width: 300px; position:relative; z-index: 1; float:right; margin: 0 0 20px 20px;}
#div-c {width: 980px; position:relative; z-index: -20;}
HTML (overly simplified)
<div id="abc-container>
<div id="div-a">
CONTENT HERE
</div>
<div id="div-b">
CONTENT HERE
</div>
<div id="div-c">
CONTENT HERE
</div>
</div>
I have played with all kinds of variations of float and z-index and order of the html.
But I am obviously missing something.
My goal is to put the product image(s) in div A, the product-details (variant, price, title, add-to-cart button, etc...) in div B and now the good part, in divC, goes the detailed product decription -- all 980px worth -- except on the upper left and upper right, the 300x300px boxes will float the content out of there, wrapping the content.
Not certain this will look the way I want, but I was hoping to give it a try.
Any suggestions?
Thx
J