Forums

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

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

Hompimpa

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>

treehouse : what would you like to learn today?

Forums

Equal Height Columns in CSS