...

View Full Version : Position:absolute affects width



brichcja
10-30-2010, 10: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, 09: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.

Apostropartheid
10-31-2010, 08:25 PM
Why are you using HTML 4 Transitional?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum