X-Cart forums

[carpeperdiem]

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

[PhilJ]

<style>
#abc-container { width: 980px; margin: 0 auto; }
#div-a { width: 300px; float: left; margin: 0 10px 10px 0; background: #ccc; padding: 10px; }
#div-b { width: 300px; float: right; margin: 0 0 10px 10px; background: #ccc; padding: 10px; }
#div-c { background: #eee;}
</style>

<div id="abc-container">
<div id="div-c">

<div id="div-a">
Vivamus hendrerit tortor nisl, ac lacinia nulla malesuada in. Pellentesque molestie fringilla est, id placerat urna fringilla ut. Ut sodales urna purus, eu aliquet massa malesuada in. Ut euismod ipsum lectus, ut gravida sem rhoncus a. Nunc auctor eros a eleifend elementum. Duis egestas velit arcu, at ultrices sem iaculis eget. Integer odio metus, fringilla quis ligula sit amet, mollis laoreet tellus. Nunc neque purus, ornare eget fringilla quis, lobortis et velit. Mauris semper nulla ante. 
</div>

<div id="div-b">
Vivamus hendrerit tortor nisl, ac lacinia nulla malesuada in. Pellentesque molestie fringilla est, id placerat urna fringilla ut. Ut sodales urna purus, eu aliquet massa malesuada in. Ut euismod ipsum lectus, ut gravida sem rhoncus a. Nunc auctor eros a eleifend elementum. Duis egestas velit arcu, at ultrices sem iaculis eget. Integer odio metus, fringilla quis ligula sit amet, mollis laoreet tellus. Nunc neque purus, ornare eget fringilla quis, lobortis et velit. Mauris semper nulla ante. 
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nunc in felis venenatis volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis consectetur risus in sodales. Ut vitae aliquam sapien, eu porttitor magna. Integer quis cursus magna. In sapien nulla, congue vel imperdiet sed, commodo quis nunc. Sed tincidunt nulla blandit metus imperdiet accumsan. Morbi et turpis eu ante auctor pretium vel venenatis odio. Phasellus dapibus mi ligula, a ultrices nibh placerat eu. Vestibulum at nulla arcu. Maecenas suscipit imperdiet tellus, varius sodales orci venenatis a. Praesent nec erat vestibulum, ultricies dui in, sagittis elit.</p>
<p>Maecenas et risus gravida, fermentum quam eget, molestie orci. Ut porta aliquam nibh, ut porta enim egestas vitae. Maecenas euismod, tortor vitae venenatis pulvinar, diam elit tempus mauris, vitae pharetra ipsum urna non velit. Donec fermentum ligula nec urna mollis, vitae imperdiet erat tincidunt. Fusce pharetra fermentum quam, luctus consectetur purus sagittis eget. Morbi ac auctor massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam luctus vel orci nec tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nunc in felis venenatis volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis consectetur risus in sodales. Ut vitae aliquam sapien, eu porttitor magna. Integer quis cursus magna. In sapien nulla, congue vel imperdiet sed, commodo quis nunc. Sed tincidunt nulla blandit metus imperdiet accumsan. Morbi et turpis eu ante auctor pretium vel venenatis odio. Phasellus dapibus mi ligula, a ultrices nibh placerat eu. Vestibulum at nulla arcu. Maecenas suscipit imperdiet tellus, varius sodales orci venenatis a. Praesent nec erat vestibulum, ultricies dui in, sagittis elit.</p>
<p>Maecenas et risus gravida, fermentum quam eget, molestie orci. Ut porta aliquam nibh, ut porta enim egestas vitae. Maecenas euismod, tortor vitae venenatis pulvinar, diam elit tempus mauris, vitae pharetra ipsum urna non velit. Donec fermentum ligula nec urna mollis, vitae imperdiet erat tincidunt. Fusce pharetra fermentum quam, luctus consectetur purus sagittis eget. Morbi ac auctor massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam luctus vel orci nec tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nunc in felis venenatis volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis consectetur risus in sodales. Ut vitae aliquam sapien, eu porttitor magna. Integer quis cursus magna. In sapien nulla, congue vel imperdiet sed, commodo quis nunc. Sed tincidunt nulla blandit metus imperdiet accumsan. Morbi et turpis eu ante auctor pretium vel venenatis odio. Phasellus dapibus mi ligula, a ultrices nibh placerat eu. Vestibulum at nulla arcu. Maecenas suscipit imperdiet tellus, varius sodales orci venenatis a. Praesent nec erat vestibulum, ultricies dui in, sagittis elit.</p>
<p>Maecenas et risus gravida, fermentum quam eget, molestie orci. Ut porta aliquam nibh, ut porta enim egestas vitae. Maecenas euismod, tortor vitae venenatis pulvinar, diam elit tempus mauris, vitae pharetra ipsum urna non velit. Donec fermentum ligula nec urna mollis, vitae imperdiet erat tincidunt. Fusce pharetra fermentum quam, luctus consectetur purus sagittis eget. Morbi ac auctor massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam luctus vel orci nec tincidunt.</p>

</div>
</div>

[carpeperdiem]

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

[carpeperdiem]

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

[carpeperdiem]

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.

[carpeperdiem]

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