...

View Full Version : RESOLVED Expanding Divs/Columns



jihanemo
02-25-2011, 07:49 PM
Hey, guys. I'm trying to implement the expanding div/column trick on my website (http://retrocitysunglasses.com). I know most of you are already familiar with the way it works - divs placed next to each other (such as a sidebar div & content div) should expand in height once the other div stretches downward. This trick is especially useful for adjacent divs that have different background colors or share a border...

You'll see, on this page (http://retrocitysunglasses.com/), that the height of the sidebar does not match the height of the content div even though they're in the same container...

On this page (http://retrocitysunglasses.com/confirmation.html), you'll see the opposite - content div does not match the height of the sidebar div...

I've used the trick successfully on my other ecomm. website (http://www.americanchic.net/handbags.html)...

I duplicated the code on the top-most website but I went wrong somewhere along the way...

I need to fix the CSS w/out adjusting the HTML code. Help?

Excavator
02-25-2011, 08:01 PM
Hello jihanemo,
All three of those sites are behaving the same. They are also behaving as they are supposed to.
To better show it, on your page at http://www.americanchic.net/handbags.html , put a background color on #sidebar like this -
#sidebar {

float: left;
border-right: 1px solid #dddddd;
padding: 0;
width: 215px; /*Width of left column*/
background: #f63;

}

For equal height columns you may like the faux columns (http://nopeople.com/CSS%20tips/faux_columns/index.html) method that uses an image.

Here is another method of equal height columns (http://nopeople.com/CSS%20tips/fluid_width/index.html) without the use of a full width image.

jihanemo
02-25-2011, 08:21 PM
^ Thank you, thank you.

Good to hear they're behaving as they're supposed to.

But when I use Firebug to highlight the entire sidebar column, it shows that the sidebar column is shorter than the content div... (content div has white background)...

Also, the sidebar on the website has a background color on it... ?

site (http://retrocitysunglasses.com/)

Excavator
02-25-2011, 08:35 PM
^ Thank you, thank you.

Good to hear they're behaving as they're supposed to.

But when I use Firebug to highlight the entire sidebar column, it shows that the sidebar column is shorter than the content div... (content div has white background)...

Also, the sidebar on the website has a background color on it... ?

site (http://retrocitysunglasses.com/)

For that site you would need to use faux columns I linked you to. That would be easiest, you just need to make an image that will work for you.


Something like this as the background of #outerwrapper, repeated on the y axis -

jihanemo
02-27-2011, 03:24 PM
Thanks, for the tips again.

If I understand it correctly, faux column (http://nopeople.com/CSS%20tips/faux_columns/index.html) would not work for me since my sidebar div and content div need 2 separate background colors, right?

I looked hard @ equal height columns (http://nopeople.com/CSS%20tips/fluid_width/index.html) - so all I need to do insert a repeating background image on y axis for the sidebar & content divs in order to give the equal heights regardless the amount of content in each?

Excavator
02-27-2011, 05:14 PM
Thanks, for the tips again.

If I understand it correctly, faux column (http://nopeople.com/CSS%20tips/faux_columns/index.html) would not work for me since my sidebar div and content div need 2 separate background colors, right?

Did you look at the image I uploaded as an example for you? It has two colors though you might not realize it when you look at it if the background color of your browser is white.

Faux columns is onliy limited by what kind of image you make and the fact it is strictly a y axis thing.

jihanemo
02-27-2011, 06:12 PM
Aaah. I see. Genius. Okay - I'm going to get to work. Thanks, again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum