3 column fixed width template

**shaparis** · May 26, 2005 11:25

Hi there,

i know there are alot of templates out there for 3 column fixed width- but everyone i try seems not to work the way i want it to.

I need a 3 column fixed width- and that included the center column to be fixed. I need it to be 800 pixels wide. When i try to go and resize a fixed width template- everything scrambles around. I would like the footer to be centered at the bottom.

and I need it to work on as many browsers as possible!

What does everyone recommend for a solid, dependable template i can work with?

Here is an example of pretty much the style i am lookign for:http://www.cfg1.com/

I have tried hacking around with this style sheet and strip out all the extras- and i just can not seem to get it to work!

thanks!
sha

**SantaRosaDesign** · May 26, 2005 11:37

How about the following code from http://www.devarticles.com/c/a/Web-S...out-with-CSS/5

You could just add another 150px column on the right, and subtract 150px from the content column which is 650 in this example.
<html>
<head>
<title>TWO-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

**Egor** · May 26, 2005 11:39

Hi,

Here's a basic 3 col fixed:

html:

Code:

<div id="wrap">

<div id="header">
<h1>Header Text</h1>
</div>

<div id="left">
left stuff
</div>

<div id="right">
right stuff
</div>

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

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

</div>

css:

Code:

body {
text-align: center;
}

div {
text-align: left;
}

#wrap {
width: 700px;
margin: 0 auto;
}

#header {
background: blue;
height: 250px;
}

#left {
float: left;
width: 150px;
}

#right {
float: right;
width: 250px;
}

#center {
margin: 0 250px 0 150px;
}

#footer {
clear: both;
}

**shaparis** · May 26, 2005 18:18

hi there,

many thanks! I guess i needed to start with somethign really simple- it is helping!

I also found this to be a useful tutorial:
http://joshuaink.com/blog/196/a-simp...column-layouts

thanks again!
sha

User Tag List

Thread: 3 column fixed width template

Thread Tools

Display

3 column fixed width template

Bookmarks

Bookmarks

Posting Permissions