Basic three column layout with header AND FOOTER [Archive] - Lissa Explains it All: Web Design Forums

raydona

06-27-2011, 12:16 AM

Hi,
The site at http://www.lissaexplains.com/css3.shtml gives a basic CSS three column layout with header. I am not good at designing CSS layouts . Therefore, I wonder if someone might expand the above mentioned layout to include a footer, i.e., I'm looking for a basic CSS three column layout with header and footer. I would be very grateful. The only thing that comes to mind would be to create another div at the end and let it float to the left. But I'm certain this would be poor design and would require some kind of wrapping.

macab

07-11-2011, 11:26 AM

If you're still around and looking for help... I've modified the code to add a bottom. I also added borders so you can see where the div layers are on the visual. Copy and paste the new code below.

CREDITS: This is Lissa's coding and credits go to her. Sorry Lissa, helping out this individual!

<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
#bottom {
margin: 130px;
padding: 10px;
height: 100px;
}
</style>

<style>
div {
border: .2em solid #900;
}
#border {
border-width: .2em;
border-style: dotted;
border-color: #900;
}
</style>
</head>

<body>

<div id="header" id="border">

Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that

is located on this page between the head tags.

</div>

<div id="left" id="border">

Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that

is located on this page between the head tags.

</div>

<div id="center" id="border">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the

properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

<div id="right" id="border">

Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet

that is located on this page between the head tags.

</div>

<div id="bottom" id="border">

Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet

that is located on this page between the head tags.

</div>
</body>
</html>