Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

css footer and absolute question

A

andyjamesnelson

macrumors 6502
Original poster
Aug 24, 2003
286
0
Jacob's house
Hey I found this footer tip:

the html

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

the css

*, body {margin: 0; padding: 0;}
#container {display: block; position: absolute; min-height: 100%;}
#content {display: block; margin-bottom: 3em;}
#footer {position: absolute; display: block; bottom: 0; height: 3em }

All works fine... I add a background, color and height to the footer and content so I could see them and the whole thing is sat flush left.

Now is there a way to get over the absolute attribute canceling out margin:0 auto so that the page still centers?

Also I really don't get what absolute means without any coordinates i.e top:100px etc?

Would poistion:relative mean anything on its own? Nothing I've read about css suggests just using these attributes on their own?

Andy
 
andyjamesnelson said:
Now is there a way to get over the absolute attribute canceling out margin:0 auto so that the page still centers
Click to expand...

You might be able to do margin: 0 auto; rather than just 0. Worth a shot. I'd have to put together a test page to try things out.

andyjamesnelson said:
Also I really don't get what absolute means without any coordinates i.e top:100px etc?

Would poistion:relative mean anything on its own? Nothing I've read about css suggests just using these attributes on their own?
Click to expand...

Absolute positioning without specific placement means it will stay where it lands, as the page is rendered that is. Using absolute positioning removes the content from the page flow so it won't influence other elements and those other elements won't influence it. The #container doesn't have coordinates because it's likely the first element in the body tag so it will naturally land at top:0 and left: 0.

Relative positioning would be the same thing except the element is not removed from page flow. Using relative on its own is fairly common for me as it's generally what you do with the elements inside that relative element that matters, because the inner elements can be placed relative to that parent. At least that's how I use it generally. CSS is flexible like that.

Hope that clears it up a little.
 
Ok i get the use of absolute alone thanks for as for not being able to center the page I didn't understand what you meant? I am trying margin 0 auto;?

That doesn't work because of the absolute that seems to be needed for the footer at the bottom to work...

Andy
 
All you should need to do is change the #container to be position:relative; and add margin: 0 auto;

The position attribute describes the html elements position relative to its parent.

There is a good tutorial here:
http://www.w3schools.com/Css/pr_class_position.asp

The final code would look like this:
<html>
<head>
<style>
*, body {margin: 0; padding: 0;}
#container {display: block; position: relative; min-height: 100%;margin: 0 auto;}
#content {display: block; margin-bottom: 3em;}
#footer {position: absolute; display: block; bottom: 0; height: 3em }
</style>
</head>
<body>
<div id="container">
<div id="content">Some content here</div>
<div id="footer">The footer here</div>
</div>
</body>
</html>
 
I toyed with a test page and got it to center (only tested in Firefox and Safari so naturally it will break in IE). I made bold the key things I changed. I have some background colors added so things can be seen and the width on container can be set to whatever you want. See what you think of the results. Again, I haven't tested this very much.

Code: 
*, body {
 margin: 0; padding: 0;
}
#container {
 position: absolute;
 [B]left: .01%; right: .01%;[/B]
 [B]margin: 0 auto;[/B]
 min-height: 100%; [B]width: 47em;[/B]
 background: #ff0;
}
#content {
 margin-bottom: 3em;
 background: #0f0;
 [B]width: 100%;[/B]
}
#footer {
 position: absolute;
 bottom: 0;
 height: 3em; [B]width: 100%;[/B]
 background: #f00;
}
 
Hey, no if you do that the footer stops being at the bottom.

Sorry I should have explained clearer what the code was doing!

the html

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

the css

*, body {margin: 0; padding: 0;}
#container {display: block; position: absolute; min-height: 100%;}
#content {display: block; margin-bottom: 3em;}
#footer {position: absolute; display: block; bottom: 0; height: 3em }

This is a way of making a footer stick at the bottom of the page and not overlap the content.

What I am trying to work out is how to use this and still center the page?

Sorry for not being totally clear.

Andy
 
hey! last friday i was breaking my head to make a footer with absolute positioning...and i couldnt..
i didnt test this solution at my job's site yet... but i think it can help me, thanks a lot!


This is a way of making a footer stick at the bottom of the page and not overlap the content.

What I am trying to work out is how to use this and still center the page?
Click to expand...

i think i can help you in return!
i learned that to centralize an absolute-positionated div we can do this in css of it:

#container {
width: 988px;
margin-left: 50%;
left: -494px;
}

where 494 is the half of the div's width.
hope i could help...now let me pay attention to my php course =D
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back