Question

I asked a similar question earlier and we came down to this CSS solution being the closest, but it’s no cigar. So help out if you can!

I need two divs, #post_content and #sidebar, to have matching heights. I’m trying to find a CSS workaround for this.

Positioning it absolutely does the job but some content is cut-off when the post content is shorter than the sidebar’s content. Is there a CSS solution (possibly adding another div inside #sidebar) which will allow me to absolutely position #sidebar while always showing all its content?

Note: It is important #sidebar’s background and border extend the same height as #post_content

Note: #sidebar and #post_content are wrapped in #container

Example of a page where the sidebar content is being cut-off (#post_content shorter than #sidebar): http://themeforward.com/demo2/2011/07/08/link/

THE CSS CONCERNED:

#sidebar {
    float: right;
    width: 410px;
    overflow:hidden;
    position:absolute;
    clear:both;
    border-left:1px solid #000;
    background:#AAA;
    top:0;
    right:0;
    bottom:0
}
#post_content {
    clear: both;
    display: block;
    float: left;
    position:relative;
    overflow: hidden;
    width: 660px
}

NOT NECESSARY… BUT COULD BE USED

#container {
    width: 1126px;
    clear: both;
    overflow:hidden;
    position:relative;
    margin:35px auto
}

Answer 1

This is the CSS holy grail – here’s the article:
http://www.alistapart.com/articles/holygrail/