View Full Version : [CSS] column layout without explicitly setting sizes, how!?

12-18-2009, 10:48 PM
Having trouble creating a layout with certain conditions like this: (with CSS)


Using tables, it's no problem. But I'm trying to accomplish the same result with CSS instead of tables, and whatever I try (span/div with float, multiple containers, etc), nothing seems to work, or suddenly B wraps under A and C instead of keeping column, etc... :(

My needs: column A should be as wide as required for its content. So I don't want so specify an explicit size in px or % there.
For the remaining space (so B+C), I can specify the size of C in px or % (for example C is 20% or C is 150px wide), and B should get whatever is left.
I also don't want to explicitly specify the height for the columns, they should be as tall as required for the content (so adding more content = column gets taller).

Now, the thing is, the entire width (A+B+C) is not known/fixed in advance. It's dynamic, depending on the content and other layout settings.

What is the most compatible, cleanest way to pull this off?

12-19-2009, 11:59 AM
Something like that ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>3 columns</title>
<style type="text/css">
.a,.b,.c {

.a {
.c {

.b {

<div class="a">as wide as required for its content</div>
<div class="c">C in px or %</div>
<div class="b">b get whatever is left</div>


You'll need to give .b the layout to make it work properly in IE6-

12-19-2009, 06:37 PM
Something like that ?
Great, thanks a lot!! http://img42.imageshack.us/img42/4838/loveyv.gif
The overflow:auto for the middle div was just what I needed, seems to do the trick wonderfully!

You'll need to give .b the layout to make it work properly in IE6-
Not sure if I understand what you mean here, do I need to add any IE6-specific CSS for this to work, or..?