Wed, 2007-06-13 14:32
hi,
I am creating a 3 column layout with a footer at the bottom of the window. The main content for the site will be in the centre column whilst the left and right column will contain other information and also I need the content in the centre column to be the first thing in the body tab which I have been able to do. The problem is that if the information in the left and right columns is longer than the browser window the footer will go above the left and right columns.
Is it porssible to have a 3 column layout with a footer at the bottom of the window which will move down not matter which column has the most content whiclst keeping the centre column content at the top of the body?? The reason I need it at the top of the body is for SEO.
The code I have currently got is:
Untitled Document
html {
height:100%
}
body {
height:100%;
margin-top:0px;
margin-bottom:0px;
}
#container {
position:relative;
margin:auto;
width: 400px;
padding-left:150px;
padding-right:150px;
min-height:100%;
background-color:#006600;
font-size:14px;
color:#FFFFFF;
}
* html #container {
height:100%
}
#left {
position:absolute;
top:0px;
left:0px;
width:150px;
background-color:#00FF00;
min-height:100%;
}
* html #left {
height:100%
}
* html #right {
height:100%
}
#right {
position:absolute;
top:0px;
right:0px;
width:150px;
background-color:#00FF00;
min-height:100%;
}
#footer {
position:relative;
margin:auto;
height:50px;
margin-top:-50px;
background-color:#990000;
}
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Link 1
Link 2
link3
Link 2
link3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
I hope I have explained everything correctly, I know its a big ask.
Thanks in advance
Seetal
Wed, 2007-06-13 14:43
#1
Spacer
I'm not very good yet, I'm still reading and learning, and I know these aren't favorable but I have the feeling what we're looking for here is a spacer do-da??
Hmmm, see if I can find what I mean.
.spacer
{
clear:left;
}
Then stick this after your last column in the HTML...
Sorry if I'm completely wrong, as I say, still learning,
John
Wed, 2007-06-13 16:52
#2
In the how to section of
In the how to section of this forum you will find an article called 100% height. You want that!