Perfect CSS Layout

asteffes · **Posted:** Tue Jul 25, 2006 10:19 am

I've been developing (or trying to) my first website in a 3-column + header + footer 100% equal-height CSS-only for the past few months because everyone says tables are a thing of the past.

I still have been unable to come up with a clean 3 column layout that fits all of my needs (header, footer, stretches to 100% no matter what, and works in IE and FF)

If anyone has a solid template on how to get all of this accomplished, please let me know. In the meantime, here is a collection of guides that I found helpful in my design adventures:

-This code works the best but it is dirty. there are several layers of div containers. I get confused when I try to use this code and break it into external style sheets and add content. I did not use this
[L=CSS Page Maker (css generator)]http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php[/L]

-This is the code I ended up going with. Uses a crazy padding hack to make pages display correctly, but then pages will not print. Also does not stretch to 100%. I can't figure out why.
[L=One True Layout]http://positioniseverything.net/articles/onetruelayout/[/L]

-Doesn't have equal height columns
[L=ListApart's 3 column layout.]http://www.alistapart.com/articles/holygrail[/L]

[L=Several sample templates]http://www.brunildo.org/test/#pop[/L]

[L=Quirksmode.org more CSS tricks]http://www.quirksmode.org/[/L]

Please add to my list if you have good links. And please oh please--does anyone have that 3 column 100% equal-height +footer +header template?

Amailer · **Posted:** Tue Jul 25, 2006 12:29 pm

Simplest one that I sometimes use:
index.html

HTML:

<!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" xml:lang="en" lang="en">
<head>
<title>3 Columns Layout</title>

<link rel="stylesheet" href="./main.css" type="text/css" />

</head>

<body>

<div id="main_box">

<div id="header">
<h1>3 CSS Columns</h1>
</div>

<div id="left_column">
<p>Insert data info!</p>
<p>Insert data info!</p>
</div>

<div id="middle_column">

<h1>What's up?</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tincidunt mi sed magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris id purus vitae sem luctus ullamcorper. Fusce augue. Nulla facilisi. In hac habitasse platea dictumst. Proin consequat aliquet justo. Fusce consectetuer sodales mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae orci. Curabitur elementum, nibh auctor tincidunt gravida, elit augue feugiat elit, a interdum metus est ac lectus. Donec ante. Mauris pellentesque.
</p>

</div>

<div id="right_column">
<p>Insert data info!</p>
<p>Insert data info!</p>
</div>

<div id="footer_box">
<p>Insert data info!</p>
</div>

</div>

</body>

</html>

main.css

css:

body {
margin: 0;
padding: 0;
}

h1 {
margin: 0;
padding: 0;
}

#main_box {
position: relative;

margin-right: auto;
margin-left: auto;

width: 770px;
}

#header {
margin-right: auto;
margin-left: auto;

width: 770px;
height: 100px;

color: #000000;
background-color: #40B7FF;
}

#left_column {
float: left;
position: relative;
display: block;

margin-right: auto;
margin-left: auto;

width: 150px;

color: #000000;
background-color: #FFD350;
}

#middle_column {
float: left;
position: relative;
display: block;

width: 470px;

color: #000000;
background-color: #F0FFF9;
}

#middle_column p {
padding: 0 10px 0 10px;
}

#middle_column h1 {
padding: 0 0 0 5px;
margin: 2px;
}

#right_column {
float: right;
position: relative;
display: block;

width: 150px;

color: #000000;
background-color: #FFD350;
}

#footer_box {
clear: both;
position: relative;

height: 50px;
width: 770px;

color: #000000;
background-color: #28AEFF;
}

Hmm, I'll try and make one that streatches the side columns along with the middle one

asteffes · **Posted:** Tue Jul 25, 2006 1:32 pm

thanks for your help, i'll look forward to seeing your next iteration.

I've got a site to develop that is very table-like, but I chose to use CSS because it was recommended.

My header contains a main navigation and my left column contains sub navigation. My right border is just an image.

Both left and right borders need to connect with the footer regardless of content and display their background colors/repeating images.

The page needs to reach 100%

I've got it working...kind of, but it gets chopped in half when viewing with internet explorer.

Amailer · **Posted:** Wed Jul 26, 2006 12:14 am

Lets see your code maybe we can fix it up

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members