Expanding Divs/Columns

Hey, guys. I’m trying to implement the expanding div/column trick on my [B]website[/B]. 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, [B]on this page[/B], that the height of the sidebar does not match the height of the content div even though they’re in the same container…

[B]On this page[/B], you’ll see the opposite - content div does not match the height of the sidebar div…

I’ve used the trick successfully on [B]my other ecomm. website[/B]

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?

Assuming your sidebar is inside your wrapper. The easiest way would be to just use an image (5px tall) of a cross section of your site and repeat it y down your wrapper. Or you could use a pure CSS method. All the links you need are in here http://www.visibilityinherit.com/code/eqaul-height-columns-withcss.php

Thanks for your reply.

I’m currently using the trick on my site but I don’t think it’s working properly. Using Firebug to highlight the sidebar, I see that the sidebar is shorter than the content div (on [B]this[/B] page)…

Hi,

You don’t seem to be using any “trick” to make the background extend so I’m not sure how you expect it to go automatically go to the bottom.

You could use the thick border and negative margin technique to provide your column color.

e.g.


#outerwrapper {
    overflow: hidden;
    width: 825px;
    border-top: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    padding: 0;
    margin-right: auto;
    margin-left: auto;
}
#contentwrapper {
    padding: 0;
    margin: 0;
    background:#fff;[B]/* right column color*/[/B]
   [B] border-left:175px    solid #d4d4d4;/* left column color */
    width:650px;[/B]
}
[B]#contentwrapper:after{
    content:" ";
    clear:both;
    display:block;
    height:1px;
    visibility:hidden;
}[/B]
#sidebar {
    float: left;
    border-right: 1px solid #aaaaaa;
    padding: 0;
    width: 175px; /*Width of left column*/
  [B]  margin-left:-175px;
    position:relative;[/B]
}
#content {
    border-left: 1px solid #aaaaaa;
    padding: 0;
}


^ Using that code made the sidebar disappear completely. Not sure why, though. But I see what you were doing. Thanks.

Thanks, guys. I’ll study it closer to see what I did wrong.

The code I gave above is working fine for me locally so you must have missed out or changed something.

If you can’t fix it then just shout and I’ll post the full css and html with it working in place.:slight_smile:

Fixed it w/ similar ^ method. Used a background image on parent div w/ faux columns (2 background colors marking out separate columns).

Thanks guys!