Grow your CSS skills. Land your dream job.

Help with Equal Height Columns in Fluid Width CSS

  • Anonymous
    # December 12, 2012 at 9:35 pm

    I’m working on a layout for a new website. Demo set up here: http://aarongmoore.com/test/layout.html

    The page is intended to look like this: http://aarongmoore.com/test/images/sitedemo.png

    The dark grey content area should be going to the bottom of the page, regardless of how much “content” is being displayed in it. I do not want a scroll bar in the dark gray area, I want the browser to scroll as it normally does with the navigation and logo staying static on the page.

    I have tried setting the container to height: 100% but this doesn’t help because when there is more content than is able to fit in the browser, that content is cut off… instead of being able to scroll and see it.

    This seems like a very simplistic layout in my mind but I can’t figure out how to make it happen in the CSS code. Help would be GREATLY appreciated!

    # December 13, 2012 at 5:55 am

    Unfortunately, although is looks at though it should be an easy layout problem it isn’t.

    What you have is the old ‘faux column’ problem.

    There are a couple of CSS solutions which will work with older browsers and a couple more ‘cutting edge’ solutions which could be used depending on how deep you need browser support to be.

    Otherwise, it’s an easy JS solution

    # December 13, 2012 at 6:36 am

    @joshuanhibbert

    Do I really have to sign up to see that answer?

    # December 13, 2012 at 6:59 am

    Oh, sorry. Just saved me from typing it out again. Here it is:

    What is the best technique for creating equal-height columns purely in CSS?

    The ‘best technique’ is a little subjective, but to me, it is a semantic method that has good browser support.

    While the flexible box layout module is fantastic, the browser support isn’t great (http://caniuse.com/#search=flex). So with that in mind, I’d recommend the use of display: table;. It has much better browser support (http://caniuse.com/#search=table), while still remaining semantic.

    Here is a live example of just how simple it is: http://jsfiddle.net/joshnh/7sff8/

    The only things that you need to keep in mind is that you will need to use display: table-cell; on the elements you want to be equal height (and side by side), and display: table; on the parent element. You should also specify a width on the elements (especially the parent).

    # December 13, 2012 at 7:03 am

    @joshuanhibbert

    Yeah, I get that but can you make both table-cells 100% height of the **body**?

    Oh, yes, you can: http://codepen.io/joe/pen/feqxG

    I think.

    Anonymous
    # December 13, 2012 at 1:28 pm

    Thanks @joshuanhibbert
    I found a similar solution here http://j.eremy.net/equal-height-columns-with-gutters/

    # December 13, 2012 at 3:50 pm

    @aarongmoore, instead creating gutters (with extra mark up) by creating another element declared as table cell and giving it width, you can set border spacing on parent which is declared as table like this: http://codepen.io/joe/full/fLCpu

    Anonymous
    # December 13, 2012 at 8:35 pm

    Thanks @jurotek … that’s what I’d done already. The link I posted noted that the gutters aren’t necessary so I didn’t include them.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".