Treehouse: Grow your CSS skills. Land your dream job.

Equal Height Columns in CSS

  • # November 14, 2012 at 12:04 pm

    I’m trying to overcome the old Equal Height Columns conundrum in CSS without using tables.

    I finally got a version to work on my computer, but as soon as I posted and ran it through the browser ONLINE it started to behave differently.

    Heres a cut down version of the file: [ ]( “”)

    All the important CSS is in this file Im pretty sure the CSS in ‘1.CSS’ that is linked to does not effect this issue.

    Viewing on my computer: Everything works fine. The columns all display either a background colour or image to the correct height.

    ONLINE: The Image or background colour become visible from the left hand column visible to the left! I dont understand why… this is only an issue online and not if I view in the browser directly from my PC.

    Many thanks

    # November 14, 2012 at 12:19 pm

    My favourite equal height columns hack:

    .col-group {

    .col-group .col {
    <div class="col-group">
    <div class="col"> ... </div>
    <div class="col"> ... </div>
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.