View Full Version : 3 column layout, Center semi fluid

Jan 19th, 2009, 02:53 AM
Hi, I'm trying to design a layout with 3 fixed sized columns. The trick is that I want the center one to appear fluid.

Here is an example of what I am trying:


I would like the green stripes to fill the area "fluidly".

I almost had this working. I made a div with width of 100% and a background of the green stripes. I put 3 other divs (the columns) inside the 100% div. Then, I floated the first two columns left, and floated the right column right. However, since the parent div's width is a percent, the floated divs jump down to the next row if the browser is resized too small. I would like a horizontal scroll bar to appear. I think using floated divs will always give me that problem.

Any other ideas?

Maybe use a table?


Jan 19th, 2009, 03:16 AM
Hello spetsacdc,

Any other ideas?

Maybe use a table?

No tables! You just need a min-width so the browser will not close down to less than the width of the 3 columns.

min-width for IE6 example (http://nopeople.com/CSS/min-width-CSS/index.html)
Conditional statement might work too (http://wickham43.net/maxminwidth.php)
min-width for nice browsers (http://www.w3schools.com/CSS/pr_dim_min-width.asp)

Jan 19th, 2009, 04:30 AM
Thanks! It is working in firefox (easy as usual), but I can't seem to get that IE hack to work. I tried to replicate the css and html from that hack website, but no luck:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
padding: 0;

* html .minwidth {
padding-left: 871px;
* html .container {
margin-left: -871px;
position: relative;
* html, * html .width, * html .minwidth, * html .layout, * html .container, * html #top_content, * html #bottom_content {
height: 1px;

<div class="width" style="width:100%; height:100px; background: url(back_gradient.jpg) repeat-x; min-width:871px; clear:both;">
<div class="minwidth">
<div class="container">
<div style="width:158px; height:100px; background: url(bar_left.gif); float:left;">Col 1</div>

<div style="height:100px; background: url(bar_mid.gif); float:left; width:200px;">Col 2</div>

<div style="width:513px; height:100px; background: url(bar_right.gif); float:right;">Col 3</div>



The Col 2 and Col 3 still go to a new line when the browser is small enough.
Any tips? Thanks

Jan 19th, 2009, 05:06 AM
Sweet, I think I got it working! I found this site:


It goes through step by step what the page you linked to does.

Thanks for your help!