PDA

View Full Version : 3 column layout, Center semi fluid



spetsacdc
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:

http://i240.photobucket.com/albums/ff202/spetsacdc/fff.jpg

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?

Thanks

Excavator
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)

spetsacdc
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
margin:0;
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;
}
</style>
</head>
<body>

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

</div>


</body>
</html>

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

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

http://www.htmlgoodies.com/beyond/css/article.php/11160_3725821_1

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

Thanks for your help!