3 column layout, left and right fixed width, center fluid

by Yang Yang on December 4, 2007

There’s this 3 column layout, in 3 <div>s of course, and the left one as well as the right one is floated to both sides with a fixed width, say 200px. The center column is fluid in width, stretching as far as its neighbors’ borders.

Now how can we make out a layout like this in CSS?

There’re 2 ways that I can think of, the first is to absolute-position the left and the right div with the center one text-aligned in between that has the right horizontal margins. The other solution, however, is a little bit tricky. Anyway, let’s clarify the ideas in codes. Code is our language.

You also need to know that it’s important that the plain structure of HTML itself is playing its role in CSS layout design. While most of us would think of what we have as:

<html>
  <body>
    <div id="left"> ... </div>
    <div id="center"> ... </div>
    <div id="right"> ... </div>
  </body>
</html>

which actually doesn’t work, it should be like this:

<html>
  <body>
    <div id="left"> ... </div>
    <div id="right"> ... </div>
    <div id="center"> ... </div>
  </body>
</html>

with the ‘left’ div and the ‘right’ div before the center one.

The absolute positioning approach:

#left {width:200px;position:absolute;top:10px;left:10px;}
#right {width:200px;position:absolute;top:10px;right:10px;}
#center {margin:0 210px;}

The tricky approach:

#left {float:left;width:200px;}
#center {overflow:hidden;}
#center div {float:right;} /* <div id="center"><div> ... </div></div> */
#right {float:right;width:200px;}
RS May 1, 2008 at 11:44 am

wow, nice work… have been trawling for a solution for ages and this was so simple… cheers

Yang Yang February 26, 2010 at 2:14 pm

The best solution is almost always the simplest.

Yang Yang December 8, 2008 at 9:43 pm

@RS
Hey, glad it helped! =)

Alec September 3, 2010 at 3:03 am

Thanks, this solution works great if the text of the center div is short enough to fit between the left and right sections. However, if the text is long the center DIV is pushed down under left and right DIVs.

Any ideas how to fix this?

Thanks

Comments on this entry are closed.

Previous post:

Next post: