2 replies [Last post]
wushupro
Offline
newbie
Manchester, UK
Last seen: 13 years 15 weeks ago
Manchester, UK
Joined: 2007-06-13
Posts: 1
Points: 0

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

I hope I have explained everything correctly, I know its a big ask.

Thanks in advance

Seetal

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 2 years 52 weeks ago
Bournemouth
Timezone: GMT+1
Joined: 2007-05-31
Posts: 693
Points: 45

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

Have YOU said Hello yet?
The CSSCreator Hello Thread

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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!