CSS help please? 3 DIVs, 2 floating, z-index?
 

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

Re: CSS help please? 3 DIVs, 2 floating, z-index?
 

Re: CSS help please? 3 DIVs, 2 floating, z-index?
 

Ah, the content for div C comes AFTER the div-a and div-b content!

Gonna try right now.
Thanks for the tip, Phil.

J

Re: CSS help please? 3 DIVs, 2 floating, z-index?
 

Hi Phil,

The placement of the div-c content after the other div content was indeed the key.
I also had to use clear:both; on div-a

Now I am battling the margins.
I want the text of div-c to be 30px to the right of the div-a image, and also below. I thought the float: left; margin: 30px 30px; would do tnat, but it moves div-a to the right 30px. Hmm...

I'm gonna keep trying. Thanks for getting me this far.
J

http://www.carpeperdiem.us/xcartforum/3divs-in-a-boat-2.png

Re: CSS help please? 3 DIVs, 2 floating, z-index?
 

PS -- adding padding to div-c moved div-b to the right (off the page). not desired.

I'm gonna test on a new page far away from xcart.
Thanks!

PS -- I am leaving on a road trip (taking my kid to summer camp) in about an hour. No connectivity until I return. I'll be driving for 18 of the next 36 hrs. Hopefully, I will think of the perfect css while driving. That's much safer than trying to code while on the highway.

Re: CSS help please? 3 DIVs, 2 floating, z-index?
 

OK.
I tested on a non-x-cart site and only had 3 divs.
The concepts here work, although there are some css negative margins needed for a couple elements.

I have the divs performing exactly as I want now.

Not so sure I like the result, but that's OT and purely subjective.
The code works!

Thanks,
J