Positioning element relative to fixed element

ReformatMe

08-04-2010, 08:31 PM

Hello!
I've read tutorials on CSS positioning but I'm still having some issues. I'm working with three DIVs; a header, footer and one for content. They're positioned fine.

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

<html>
<head>
<title>Title</title>

<style type="text/css">

body {
margin: 0;
padding: 0px;
background-color: red;
font-family: Helvetica, Arial;
}

.header {
width:525px; min-height:160px; position:relative; z-index:100; left:200px;
top:0px; text-align:left;
background-color: blue;
}

.main {
width:525px; overflow:auto;
position:relative; z-index:2; left:200px; top:0px;
background-color: yellow;
}

.footer {
width:525px; overflow:auto;
position:relative; z-index:100; left:200px; bottom:0px;
background-color: blue;
}

</style>

</head>

<body>

<div class=header>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class=main>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class=footer>
footer
</div>

</body>
</html>

The problem comes here- I'd like to make the header and footer fixed. When I change the header from position:relative to position:fixed, the content div becomes is positioned relatively to the page instead of to the fixed header. I understand I could make the content div absolute, but I want to allow for changes in the size of header depending on what's in it. Is there anything I'm doing wrong or anything I can do to achieve the same effect?

I've searched but I've got no idea what I'm doing wrong. Any help is greatly appreciated!

skywalker2208

08-04-2010, 08:46 PM

For one thing don't use position, left, top, right and bottom to design your page layout unless you have a reason for it. Is there any reason why you are using them?

ReformatMe

08-04-2010, 10:20 PM

For one thing don't use position, left, top, right and bottom to design your page layout unless you have a reason for it. Is there any reason why you are using them?

Thanks for letting me know :) To be honest I'm not sure, is there a reason I shouldn't?
It's valid code and it's used in this tutorial (http://www.barelyfitz.com/screencast/html-training/css/positioning/) so I thought that was what I should use. I've changed it to using margin-left, margin-top etc, although this makes no difference :(

skywalker2208

08-04-2010, 11:44 PM

Take a look at this article. Old but still points are valid.

What made it break?

One problem with laying out blocks of text in very specific positions on the screen is that it doesn't take into account users who have their font sizes enlarged for any reason. It also doesn't take into account users on flat panel displays who often have the display set to something other than 72 or 96 pixels-per-inch (ppi). And it seemed there were enough of both of these kinds of users that the calls came in.

Blocks of text ended up being larger than accounted for by the designers for these users. So while the second paragraph may have been placed 175 pixels from the top of the page, at higher resolutions or larger font sizes, the end of the paragraph above it extended below that 175 pixel mark, causing the text to overlap. Of course, this was compounded as the page progressed, and sometimes a third paragraph would start before the first one had ended.

http://www.algonquinstudios.com/Home/About/Tech/WrongWayCSS

ReformatMe

08-05-2010, 09:50 AM

Take a look at this article. Old but still points are valid.

http://www.algonquinstudios.com/Home/About/Tech/WrongWayCSS

Thanks for the link. I understand the benefits of a fluid layout but in this particular instance it is inappropriate. I'm working with a lot of images with very specific sizes that I have no control over. For example, I have no control over the header image size, it will be 525px in width.

Does anyone know if what I'm trying to achieve is possible or know of another approach that would create the same effect?