3-column CSS layout: width issues

Yellowstone

Hello!

I'm trying to build a 3-column layout, but I can't get it to behave like I want it to.
Here's what I want to do:

LEFT should be only as wide as the content (I have a float:left in there)
RIGHT should be the same way, as wide as the content (I have a float:right in there)
(in both cases, the width of the content can vary, so I do not want to specify it)

finally, CENTER should fill any space remaining, no matter how much or how little it contains.

Right now, I'm using float:left on the left column and the center column, and float:right on the right column.

This is what I get:

What I want, however, is that LEFT and RIGHT are only as wide as the contents is (just like LEFT is), and the green CENTER column to take up whatever space is left before RIGHT begins. Also I want it to be x-browser compatible.

Any ideas?

Thanks for your help!

rikmoncur

This is a great resource with 40 examples of layouts:

http://blog.html.it/layoutgala/

NogDog

This might be close to what you are trying to do: http://www.alistapart.com/articles/holygrail

Yellowstone

Thanks for your replies!

That looks great, but all of those examples have a specific width in the two outer columns. What I want is the outer columns to be just as wide as the contents. Would that be possible?

NogDog

Here's a funky little (possible) solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<style type="text/css">
* {
   height: 100%;
}
body {
   margin: 0;
   padding: 0;
}
body * {
   height: auto;
}
#left {
   float: left;
   background-color: #def;
   padding: 1em;
   margin: 0 1em 0 0;
   height: 100%;
}
#right {
   float: right;
   background-color: #fed;
   padding: 1em;
   margin: 0 0 0 1em;
   height: 100%;
}
#main {
   margin: 0;
   padding: 1em;
}
</style>
</head>
<body>
   <div id="left">
      <h3>Left Column</h3>
      <p>This is the left column.</p>
   </div>
   <div id="right">
      <h3>Left Column</h3>
      <p>This is the left column.</p>
   </div>
   <div id="main">
      <h1>Center Column</h1>
      <p>This is the center column, a.k.a the middle column. Let's see how wide it goes.
      Lorem Ipsum, and all that jazz; yadda, yadda, yadda.</p>
   </div>
</body>
</html>

Yellowstone

Thanks NogDog, that's a great solution! Works perfectly. The funny thing is that the center's contents is being thrown to the bottom of the page when the browser window's size is reduced below a certain size. But It doesn't really matter.