Equal Height Columns in CSS

[King_Slim]

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

[Taufik Nurrohman]

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>

[Author]

Posts