...

View Full Version : 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum