Best way to position header- absolute or relative

**Bayliss Trevor** · Oct 4, 2011 16:58

I have my html for my header with navigation div in the middle of my page below other elements. So that users can see it at the top of the page do I need to relatively position it or absolutely? I read that absolutely positioning doesn't work with firefox. Thanks

**gary.turner** · Oct 4, 2011 18:00

What is your compelling reason for breaking the natural structure of the document? If for SEO, you've been drinking the Kool-Aid.

Firefox handles position just fine. Older IEs had problems, but the last two iterations have been decent.

cheers,

gary

**Paul O'B** · Oct 7, 2011 03:32

You might be interested in the technique from this CSS quiz but as Gary said the benefits are negligible.

**Bayliss Trevor** · Oct 7, 2011 12:41

Thanks I had a crack at it here , I have tried everything from position:relative to position:absolute with top:0px but I can't seem to get the header at the top. How can I do this? Thanks http://tinyurl.com/3eoe5tu

**Paul O'B** · Oct 7, 2011 13:51

If you are placing it in a sticky footer then you will probably have to go with a fixed height banner.

Something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
	margin:0;
	padding:0
}
html, body {
	height:100%;/* needed to base 100% height on something known*/
	text-align:center;
}
#outer {
	width:930px;
	background:#fcf;
	margin:auto;
	min-height:100%;
	margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
	text-align:left;
	clear:both;
	position:relative;
}
* html #outer { height:100% }
#header {
	background:red;
	border-top:40px solid #000; /* soak up negative margin and allows header to start at top of page*/
	padding:100px 0 0;/*make room for 100px high banner*/
}
#footer {/* footer now sits at bottom of window*/
	background:red;
	width:930px;
	margin:auto;
	height:40px;/* must match negative margin of #outer */
	clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
h1, h2, p { padding:0 10px; }
#outer:after {/* thank you Erik J - instead of using display table for ie8*/
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
#banner {
	position:absolute;
	top:40px;
	left:0;
	height:90px;
	width:920px;
	background:green;
	border:5px solid blue;
	text-align:center;
}
</style>
</head>
<body>
<div id="outer">
		<div id="header">
				<h1>Sticky Footer</h1>
		</div>
		<h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
		<p>test</p>
		<p style="clear:both">Element with clear:both added just for testing</p>
		<p>test</p>
		<p>test</p>
		<div id="banner">This will appear at the top of the page</div>
</div>
<div id="footer">
		<p>&copy; All rights reserved</p>
</div>
</body>
</html>

The Banner element html is placed on the inside bottom of the wrapper and then moved with css to the top of the page. The space is held open by some padding on the header element otherwise it would overlap.

If you want a fluid height header then you will need the technique shown in the quiz I linked to above which is pretty straight forward and explained in the quiz.

**gary.turner** · Oct 7, 2011 13:53

First, your wrapper is closed in front of the header. There is no positioned ancestor other than body for the header, and that won't work well. Move the closing wrapper tag to after the footer, and immediately before the closing body tag.

Second, make wrapper {position: relative;}. That gives header a reference point.

Third, make header {position: absolute; left: 0; top: 0;}.

Fourth, make topselect {margin-top: 120px;}. AP elements are invisible to other elements, so this moves the element down enough to allow room for the header.

Fifth, reconsider the whole idea of having the header breaking the document structure.

Do not use pt metrics. That's for print, not the web. Your list items are too wide for the wrapper, make them 165px wide. So, too, are at least a couple of images. Rethink either their widths, or the width of the wrapper.

cheers,

gary

//edit: Looks like our posts crossed in the mail, Paul. I didn't give consideration to the sticky footer, but my recommendations stand except that the wrapper would close before the footer instead of after. That's using my version of the sticky footer. Whether your version or mine, the whole idea of the sticky footer is a holdover from print design and a Bad Idea™. ~gt

//edit redux: Add 1px top padding to the wrapper so that the margins won't collapse through. ~gt

**Bayliss Trevor** · Oct 7, 2011 15:00

Thanks Paul and Gary. Gary I did as you said but it doesn't seem to effect it: http://tinyurl.com/3eoe5tu
Paul thanks that sitcky footer solution looks excellent I will implement it

**gary.turner** · Oct 7, 2011 17:46

I don't see this: Third, make header {position: absolute; left: 0; top: 0;}.

cheers,

gary

**Bayliss Trevor** · Oct 8, 2011 11:43

Thanks Gary sorry left off a bracket on the css http://tinyurl.com/3eoe5tu it's almost working now, the margin on the top select div doesn;t seem to be panning out right though

Paul cheers I implemented the sticky footer but I seem to have unstuck the footer! http://tinyurl.com/3vokzz5

**Paul O'B** · Oct 9, 2011 05:47

You seem to have lost the closing div to #outer

Code:

				</div>
				<!-- HEADER END --> 
   </div>
</div>
<div id="footer">
		<p>&copy; All rights reserved</p>
</div>
</body>
</html>

**Bayliss Trevor** · Oct 10, 2011 09:46

Thank Paul Looking good now, I am having problems putting the "righthand" div to the right of the grey image, I tried float left and float right but they don't get the desired effect: http://tinyurl.com/3vokzz5

**Paul O'B** · Oct 10, 2011 10:04

Hi,
You'd need to float the topselect so that the other element can also float n the gap.

Code:

#topselect {
    float: left;
    width: 710px;
}

It looks like you are making two columns so you should really create two floated columns and then stack the content in each column as required. Don't try to put multiple individual elements left and right because they won't align as columns.

**Bayliss Trevor** · Oct 12, 2011 08:03

Thanks Paul!

User Tag List

Thread: Best way to position header- absolute or relative

Thread Tools

Display

Best way to position header- absolute or relative

Bookmarks

Bookmarks

Posting Permissions