...

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



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

http://img684.imageshack.us/img684/9307/columns.jpg

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?

Candygirl
12-19-2009, 12:59 PM
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">

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

.a {
float:left;
margin-right:3%;
}
.c {
float:right;
margin-left:3%;
width:40%;
}

.b {
overflow:auto;
}
</style>
</head>

<body>
<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>
</body>

</html>

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

Bram2
12-19-2009, 07: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..?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum