3 Column Fixed Layout

srule_

02-25-2008, 01:32 AM

Hey, How do I make a 3 column fixed layout? The trick is I want the middle column (with the content) to be before the two side columns in the xhtml markup.

ex:

<div id="pagewrap">

<div id="header"></div>

<div id="middle_column"></div>

<div id="left_column"></div>

<div id="right_column"></div>

<div id="footer"></div>

</div>

F15pilotX

02-25-2008, 01:53 AM

I'd just float the left and right columns, and then format the center one ;)
#left_column { float: left; }
#right_column { float: right; }

srule_

02-25-2008, 02:04 AM

I tried that but what happened was they both floated below my main column. I tried to clear the floats but no success.

F15pilotX

02-25-2008, 02:24 AM

Look at this page:

http://www.glish.com/css/7.asp

Nice thing about trying to help, is I just figured out what I was doing wrong on my site!

abduraooft

02-25-2008, 03:41 AM

http://bonrouge.com/3c-hf-fluid.php

harbingerOTV

02-25-2008, 03:52 AM

y'all missed the part where he wants the content first in the source ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>New document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

html, body {
padding: 0;
margin: 0;
}

body {
background: #999;
text-align: center;
padding: 30px 0;
}

#outer {
background: #ddd;
width: 900px;
text-align: left;
margin: 0 auto;
}

#innerright {
float: right;
}

#content {
float: left;
width: 500px;
background: #666;
}

#rightside {
float: left;
width: 200px;
background: #eee;
}

#left {
width: 200px;
background: #333;
}

.cb {
clear: both;
}

h2 {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="outer">

<div id="innerright">

<div id="content">
</div>

<div id="rightside">
</div>
<div class="cb"></div>
</div>

<div id="left">
</div>
<div class="cb"></div>

</div>

</body>
</html>

it'll have the 3px bug for IE6 but if you use faux columns, easy to ignore.