3

I'm working on a website that uses two columns inside a container. The container has a white background that should stretch to the bottom of whichever column is highest, so I'm using the holy grail method for that.

However, both columns should positioned so that a part of it exceeds the white background (this example uses a fixed height, which should be fluid). As far as I know, this can only be done by setting the overflow to visible but this break the equal height of the columns.

How do I fix this with as little additional elements as possible?

thirtydot
  • 224,678
  • 48
  • 389
  • 349
Stephan Muller
  • 27,018
  • 16
  • 85
  • 126

2 Answers2

5

The easiest fix in this case seems to be adding <br style="clear:both" /> before the closing tag for #container.

You can change it to <br class="clearfix" /> and .clearfix{clear:both} if you wish.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Wow, it was that easy? I've always done my best to avoid empty clearfix elements (99% of the time there's a more elegant solution) but this is obviously the exception to that rule. Thanks so much! – Stephan Muller Jan 06 '11 at 16:04
1

Solution is to use inline-block elements..

Css

.container{
    width:300px;
    background-color:#ccc;
    margin:0 auto;
    border:1px solid red;
}
.container > div{
    width:150px;
    display:inline-block;
    vertical-align:top;
}
.inner{
    background-color:#666;
    margin-top:10px;
    width:130px;
}
.left .inner{
    margin-left:-10px;
}
.right .inner{
    margin-right:-10px;
    margin-left:auto;
}

HTML

<div class="container">
    <div class="left">
        <div class="inner">left 1st inner panel</div>
        <div class="inner">left 2nd inner panel</div>
    </div><div class="right">
        <div class="inner">right 1st inner panel</div>
        <div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
    </div>
</div>

view demo

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • The other answer already worked, but +1 for the nice solution. Unfortunately I still have to support IE7 (no 6 thank god), which can't handle inline-blocks real well. – Stephan Muller Jan 06 '11 at 16:38
  • 1
    @Stephan, thank god for IE6 getting finally out of the picture.. In regards to IE7 and `inline-block` have a look at http://www.brunildo.org/test/InlineBlockLayout.html Just for future options ;) – Gabriele Petrioli Jan 06 '11 at 17:02