Grow your CSS skills. Land your dream job.

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:

    Code:
    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:

    Code:
    xxx
    yyy
    zzz
    # 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.

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