Equal Height Columns

Algaris · 2012-02-02 16:48:08

I have a container DIV with two DIVs inside floated left and right. The left floated DIV is used for content and the right DIV is used as a navigation sidebar, both of the DIVs have different background colours.

Is there a way to make the floated DIVs equal height or the same height as their parent (assuming the parent expands to the height of the DIV with the most content)? Currently I can’t get the content DIV and sidebar DIV to line up. Ideally I’m looking for a clean and elegant solution using the bare minimum HTML and CSS. Most of the examples I found when googleing involved nesting multiple DIVs, using negative margins or other haks.

Last edited by Algaris (2012-02-02 17:11:54)

wornout · 2012-02-02 16:56:23

You can use jQuery:

$(document).ready(function () {
var containerHeight = $('div#container').height();
$('div#left, div#right').height(containerHeight);
});

Consider to use innerHeight or outerHeight

Last edited by wornout (2012-02-02 16:59:03)

philwareham · 2012-02-02 18:18:48

This would be very easy with the CSS3 flexbox, but unfortunately using it in production sites is still a ways off due to patchy browser support at present.

Most of the various other methods are listed here

I’ve used the ‘one true layout’ method mentioned in that article before and it works well.

Algaris · 2012-02-09 09:28:47

Thank you both for your help. As I like to keep all the layout in my CSS files I decided to use the ‘One True Layout’ that Phil recommended.

In Google Chrome, Firefox, Safari and IE9 it works fine. IE8 won’t let me set any background colours and styles, although it does seem to pick up the floats when using the original non modified code. And IE7 refuses to display any content within the one-true DIV.

Out of curiosity does IE7 and IE8 have a problem with nth-child?

philwareham · 2012-02-09 10:13:06

Algaris wrote:

And IE7 refuses to display any content within the one-true DIV.

That site I used it on rendered fine in IE7, so not sure why it’s causing problems for you.

Out of curiosity does IE7 and IE8 have a problem with nth-child?

Yes, only IE9 and above understand the nth-child rule. However, you could use Selectivizr to make those browsers compatible if really necessary (include it with IE conditionals).

Last edited by philwareham (2012-02-09 10:13:16)

Algaris · 2012-02-09 12:30:18

Thank you. I’ve managed to get it working in everything but IE7 now. I suspect it must be something to do with my CSS as I can now see some of the content before it cuts off. Either that or it could be a problem with IETester, which I gather isn’t the most reliable way to preview websites.

Algaris · 2012-02-22 12:22:26

I’m still not having a lot of luck getting the ‘One True Layout’ to work with IE7 but after some trial and error I’ve been able to find what the problem is.

When IE7 encounters margin-bottom: -99999px; and padding-bottom: 99999px; in #content .col they cancel each other out. The end result is that anything contained with in the columns is not displayed.

Hers’s my code. You might notice that I’m using both LESS CSS and Twitter Bootstrap.

#content { 
	clear: both;
	overflow: hidden;
	margin-bottom: @footerHeight + 25px;  // This stops the footer from overlapping the bottom of the content area
}
#content .col {
	width: @innerContainerWidth;
	margin-bottom: -99999px;
	padding-bottom: 99999px;
}
// Left column - Main Content
#content .col:nth-child(1) { 
	.pull-left;
	background-color: @white;	
}
// Right column - Sidebar
#content .col:nth-child(2) {
	.pull-right;
	background-color: @blueSpider; 
	width: @sidebar;
	padding-top: 10px;
	padding-left: 5px;
}
#content p { 
	margin-bottom: 10px; // Bottom padding on col is busy.
}

philwareham · 2012-02-22 12:46:06

Algaris wrote:

Hers’s my code. You might notice that I’m using both LESS CSS and Twitter Bootstrap.

If you are using Less (or Sass) you should take advantage of the nesting otherwise you’re not using one of the key benefits.

I’m not sure why you are using :nth-child which is not natively supported in IE7 or IE8, could you not use :first-child instead (which is supported) with decedent selectors, for example…

#content { 
    clear: both;
    overflow: hidden;
    margin-bottom: @footerHeight + 25px;  // This stops the footer from overlapping the bottom of the content area

    .col {
        margin-bottom: -99999px;
        padding-bottom: 99999px;
        .pull-right;
        background-color: @blueSpider; 
        width: @sidebar;
        padding: 10p 0 0 5px;

        // Left column - Main Content (overrides some rules above)
        &:first-child { 
            .pull-left;
            background-color: @white;
            width: @innerContainerWidth;
            padding: 0;
        }
    }

    p { 
        margin-bottom: 10px; // Bottom padding on col is busy.
    }
}

Not saying that will fix the problem, but give it a try.

Last edited by philwareham (2012-02-22 12:48:48)

philwareham · 2012-02-22 12:56:59

Also, might be something to do with your clearfix. The current accepted clearfix is as follows…

// clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix {
    &:before, &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
    //IE7 fix
    *zoom: 1;
}

So, add that to your CSS file, and then in my code in the previous post, change line 2 from:

   clear: both;

To:

   .clearfix;

Last edited by philwareham (2012-02-22 12:59:36)

Textpattern CMS

Textpattern CMS support forum

#1 2012-02-02 16:48:08

Equal Height Columns

#2 2012-02-02 16:56:23

Re: Equal Height Columns

#3 2012-02-02 18:18:48

Re: Equal Height Columns

#4 2012-02-09 09:28:47

Re: Equal Height Columns

#5 2012-02-09 10:13:06

Re: Equal Height Columns

#6 2012-02-09 12:30:18

Re: Equal Height Columns

#7 2012-02-22 12:22:26

Re: Equal Height Columns

#8 2012-02-22 12:46:06

Re: Equal Height Columns

#9 2012-02-22 12:56:59

Re: Equal Height Columns

Board footer