Equal Height Columns – CSS Layout Tutorial

[ad_1]
In this CSS tutorial we learn how to achieve equal height column backgrounds. Check out my 9 hour web design video course:

Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts, my favorite hosting company, and how to save $40 on the only hosting plan you’ll need:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:


Posted

in

by

Tags:

Comments

10 responses to “Equal Height Columns – CSS Layout Tutorial”

  1. Learning Simplified Avatar

    just asking sir, if we provide a particular height to the extreme left box and set overflow-y to auto, will that make the height of the box same to the height of the contents on the extreme left? Ah and thanks for this lovely tutorial…

  2. John Richardson II Avatar

    how can I get the pb-body-tile.jpg files?

  3. Kuber Kanav Avatar

    You can add columns of same height by using display:flex; attribute in the parent div.

  4. Niloofar S Avatar

    well this works great on chrome and firefox but not on IE9. any ideas?

  5. Lumpi Avatar

    you could simply fake a table-layout in css.

    you have to put all your divs in one div ("fakeTableColum") and then put this fakeTableColum in another div ("fakeTable").

    after that:

    #fakeTable
    {
    table-layout: fixed;
    display: table;
    width: 100%;
    }

    #fakeTableColumn
    {
    display: table-row;
    }

    #column1
    {
    display:table-cell;
    width: 50%;
    }

    #column2
    {
    display:table-cell;
    width: 50%;
    }

    #fakeTable div
    {
    vertical-align:top;
    }

  6. Asif Ashraf Avatar

    Good stuff, but really sick that we can NOT do full height of a column?????? thats really sick of CSS … is there a pure css wayout?

  7. cbcom2 Avatar

    @LearnWebCode Many thanks for your reply, your videos and your website have helped me learn a lot…

    Best Regards and Thanks again !!!

  8. LearnWebCode Avatar

    @cbcom2 To reference a file two directories up you would use "../../file-name.jpg"

  9. cbcom2 Avatar

    @ 1:45 If i want to cite 2 directories up does that mean i have to add 4 dots ?

  10. Bacho Molar Avatar

    You just know what you are doing. Awesome stuff .

Leave a Reply

Your email address will not be published. Required fields are marked *