3 Column Layout

**Fan** · 12-09-2005, 10:59 PM

I Need A 3 Column CSS Layout That Will Allow Me To Stretch Each Column Without It Affecting The Other Columns (I Believe It Is Called Fluid, Or Liquid?) But Every Layout Code I Have Found The Site Meshes Together As the Screen Or Page Gets Smaller Which Ruins My Page, I Need To Stop That From Happening. Any Ideas?

**chrishirst** · 12-10-2005, 05:21 AM

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>3 Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<div style="height:300px;width:15%;float:left;background-color:red;"></div>
<div style="height:300px;width:65%;float:left;background-color:green;"></div>
<div style="height:300px;width:15%;float:left;background-color:blue;"></div>

</body>
</html>

**Fan** · 12-10-2005, 11:13 AM

Thanks, But I'm Still Having The Same Troubles. When I Make The Browser Smaller, The Columns Get Smaller. I Need Them To Have A Set Size. Any Ideas?

**CannonBallGuy** · 12-10-2005, 01:35 PM

Then you need the complete opposite:
A fixed layout.
Try looking for what you want at http://www.ssi-developer.net/main/templates/3col.shtml

- CBG

**chrishirst** · 12-10-2005, 01:44 PM

Please don't capitalise every word it makes it hard to read

You asked for a fluid layout which is what the code above is. So is what you are after an all fixed width with set size columns or some columns fixed and some fluid or what?

All that is needed for fixing the widths is to replace the "width:nn%" with "width:nnnpx" to set the column to a fixed value.

**ibbo** · 12-12-2005, 09:04 AM

You dont need a fixed layout at all.

Keep the css above but create an additional container with a set size of yey-px.

Then you can add the remaining elements within your container keeping your fluid layout but bound by the rules of the container.

I.E.

<div style="height:310;width:500px;border:1px solid black">
<div style="height:300px;width:15%;float:left;backgroun d-color:red;"></div>
<div style="height:300px;width:65%;float:left;backgroun d-color:green;"></div>
<div style="height:300px;width:15%;float:left;backgroun d-color:blue;"></div>
</div>

This then will create you a 300x500px box and your remaining element will then fill up this space with their own boxes bound by the rules of their style. You can shrink or stretch the browser but it should remain visible and not wrap (which is what floats do I'm afraid if you dont manage them propoerly).

Ibbo

**Mooofasa** · 12-14-2005, 12:40 PM

Use em instead of px. And combine it with the suggestions shown before.

To convert px to em, use 1.38/22 * px (just replace px with your pixel size).