Position:absolute affects width [Archive]

brichcja

10-30-2010, 09:20 PM

Hello.

I'm kinda new to css, and was wondering if anybody can explain to me why the header and the footer in this code have different widths?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<style type="text/css">

/*Header*/

#header {background-color: #ffffff; font-weight: normal; font-size: 1.2em; margin: 10px; padding: 4px; letter-spacing:

0.06em; border-top: solid black 1px; border-bottom: solid black 1px;}

/*Footer*/

#footer {background-color: #ffffff; font-weight: normal; font-size: 1.2em; margin: 10px; padding: 4px; letter-spacing:

0.06em; border-top: solid black 1px; border-bottom: solid black 1px; position:absolute; bottom: 0px;}

</style>

</head>

<body>

<div id="header">
Header
</div>

<div id="footer">
Footer
</div>

</body>
</html>

I understand that it's the position:absolute; bottom: 0px; bit, but can't for the life of me work out why.

Thanks!

wojo1086

10-31-2010, 08:36 AM

It's the position:absolute;. Making the div absolute makes the width only as long as the content is inside. By changing absolute to relative, the width of the footer will be the same as the header. Granted, it'll put the footer right under the header, but there are techniques to have it always display at the bottom of the page no matter how much header and body you have.