The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

3 child columns with height:100% inside a parent div. How?

  • # July 24, 2008 at 11:18 pm

    Hi guys,

    May someone help me on how to set height:100% for each one of my columns below (left, middle and right) regardless the content inside of them? Because the way it is showed below is not working. The height from container and the 3 columns takes all the viewport. I really appreciate any help on this.

    css file:

    html, body {height:100%;}

    div#container {height:100%; margin:0 auto; width:500px;}
    div#left_column {background:#121458; float:left; height:100%; width:100px;}
    div#middle_column {background:#252525; float:left; height:100%; width:300px;}
    div#right_column {background:#121458; float:right; height:100%; width:100px;}

    html file:

    # July 25, 2008 at 1:08 am

    Your code provided is working on FF3 and IE6 for me. It has three columns extending the viewport (though I added font color to be white and set the universal margin to 0).

    Maybe describe a bit more what you are trying to do?

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed