Question

I’m building a template which should accommodate two layouts:
I have a container with div A (left) and div B (right). A has always content. If B has content, it’s width should be 30%, A gets the rest. Both colums should have 100% heigth, no floating around the shorter element.
If B is empty, it should not show at all and A should take up 100% width.

<div class="container">
  <div class="left">
    <placeholder 1 />
    <placeholder 2 />
  </div>
  <div class="right"><!-- can be empty -->
    <placeholder 3 />
    <placeholder 4 />  
  </div>
</div>

I would love to do this with just css. Is it possible?
Or am I going to need to use javascript? IE6 is not an issue…

Answer 1

See: http://jsfiddle.net/3mDnr/

That works in IE8+ and all modern browsers.

It almost works in IE7 – the only problem is that the “empty right div” refuses to hide. There just isn’t a pure CSS way to fix that, so I’ve included a snippet of jQuery-powered JavaScript to do it:

<!--[if lte IE 7]>
<script>
$(function() {
    $('.right:empty').hide();
});
</script>
<![endif]-->

You can use the faux columns technique to fake equal height columns.

HTML:

<div class="container">
    <div class="right">..</div>
    <div class="left">
        ..
    </div>
</div>

CSS:

.container {
    overflow: hidden
}
.left {
    overflow: hidden;
    background: #ccc;
}
.right {
    float: right;
    width: 30%;
    background: cyan
}