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: [http://www.archaeologyse.co.uk/ImagesNewHomePage/ASEPageHome.html ](http://www.archaeologyse.co.uk/ImagesNewHomePage/ASEPageHome.html “”)

    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 {
    overflow:hidden;
    }

    .col-group .col {
    width:50%;
    float:left;
    display:inline;
    margin-bottom:-9999px;
    padding-bottom:9999px;
    }
    <div class="col-group">
    <div class="col"> ... </div>
    <div class="col"> ... </div>
    </div>
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".