CSS positioning: header and content [Archive]

View Full Version : CSS positioning: header and content

larwilliams

08-08-2008, 02:39 PM

Hi,

I am trying to put the header above the content (using CSS) in the following document. There are 2 divs: header and content. I have the content one first for SEO purposes. How do I make sure the header always appears above the content? I have tried stuff such as margin-top:-100%, but it doesn't seem to work and Google gives no helpful examples.

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width:780px;
height:auto;
}
#header {
min-height:489px;
height:489px;
width:100%;
}
#content {
height:auto;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="content">This is the content cell. auto height. Can expand and collapse as needed.</div>
<div id="header">This is the header. 489px height.</div>
</div>
</body>
</html>

jarret

08-08-2008, 07:25 PM

Honestly I would just not worry about it. Google and other robots are smart enough to understand where the content starts and what to index.

Millions upon millions of other sites have it as the header first, usually a sidebar and THEN the content and they all seem to be doing just fine, so why make it difficult on yourself?

larwilliams

08-09-2008, 01:21 AM

I am just asking for a technical answer, not an answer I am not asking for. Please just answer the question guys :)

Dotex

08-09-2008, 07:12 AM

I think the trick is do use absolute positioning as shown below. I just added the code in red to your stylesheet; try it and let me know if it works for you. Tested in FF - 3.0
#header {
min-height:489px;
height:489px;
width:100%;
background: #006633;
position:absolute;
top: 0;
}
#content {
height:auto;
width:100%;
background: #99CC00;
position:absolute;
top:489px;
}

larwilliams

08-09-2008, 11:38 AM

Looks good. I noticed Firefox doesn't make it 780px wide, like the containing div instructs.

Dotex

08-09-2008, 11:58 AM

Sorry, I forgot to add : position:relative; to the #container
#container {
width:780px;
height:auto;
margin: 0 auto;
position: relative;

}
#header {
min-height:489px;
height:489px;
background: #006633;
position:absolute;
top: 0;
width:100%;
}
#content {
height:auto;
background: #99CC00;
position:absolute;
top:489px;
width:100%;
}
PS. margin is just to center the #container div in compliant browsers.

larwilliams

08-10-2008, 01:45 PM

Thanks. Just one more question. I have the following code and would like to have the footer div appear underneath the header and content divs. How can I achieve this in my #footer CSS rule?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #C0C0C0;
text-align: center; /* for IE */
}

#container {
margin: 0px auto; /* align for good browsers */
text-align: left; /* counter the body center */
width: 780px;
border: solid 1px #000000;
position:relative;
}

#header {
height:489px;
background: #006633;
position:absolute;
top: 0;
width:100%;
}
#content {
height:auto;
background: #99CC00;
position:absolute;
top:489px;
width:100%;
}
#footer {
}
</style>
</head>
<body>
<div id="container">
<div id="content">This is the content cell. auto height. Can expand and collapse as needed</div>
<div id="header">This is the header. 489px height.</div>
<div id="footer">This is the footer and should appear below the header and content. Needs the CSS to do that :)</div>
</div>
</body>
</html>

larwilliams

08-10-2008, 04:58 PM

Anyone please? :)

biffer

08-10-2008, 11:12 PM

larwilliams

08-10-2008, 11:55 PM

I believe the footer div should just automatically fall under content div, but if not, then you can determine the height of the content div and header div together, then add:

footer {
top: 800px; //for example
}
The problem is that the content div does not have a fixed height. While your idea does partially work, it doesn't not if the content div expands or closes. There has to be a way to achieve this :)