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;}
wow, nice work… have been trawling for a solution for ages and this was so simple… cheers
The best solution is almost always the simplest.
@RS
Hey, glad it helped! =)
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