I was working on a project recently where I needed to have my div’s align to the VERY top of the page, not 10-30px off as is the default preset. Easy? I thought it would be. You can achieve this by using css positioning, but as I had a div within a div, and (as is commonly seen) I wanted the inner div to align to the center, I had a problem. Again, it sounds easy, but it was more of a pain than it should have been. Here is a simplified version of what I came up with:
the page…
<!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>
<link rel="stylesheet" type="text/css" href="teststyle.css"/>
</head>
<body>
<div id="outer_body">
<div id="inner_body">
<div id="header_text">
<h1>Here's a Title!</h1>
a tag line here...
</div>
</div>
</div>
</body>
</html>stylesheet…
@charset "utf-8"; /* CSS Document */ body{background-color:#e2d6a9; font:Arial, Helvetica, sans-serif; margin:0px; padding:0px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #outer_body{background:url(images/outer_bg.jpg) repeat-x #0c2110; top:0px; position:relative; width:100%; height:200px; margin:0px; padding:0px; } #inner_body { margin:0px auto; position:relative; top:0px; padding:0px; width:200px; height:225px; background:#0F0 } #header_text{ margin-top:40px; width:190px; }
Firefox has failed, it's not easy to align divs at the very top...
This does NOT work by itself, though. Here’s the trick. You have to put something in every div you want to align at the very top of the page that has a margin and a padding of 0px, or you’re out of luck. I settled on an image named “spacer.gif”, which I then made have a width and height of 0px. Let’s see the difference…
<!--the index page-->
<!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>
<link rel="stylesheet" type="text/css" href="teststyle.css"/>
</head>
<body>
<div id="outer_body">
<div id="inner_body">
<img src="images/logo_bnr.jpg" width="0" height="0" id="spacer" />
<div id="header_text">
<h1>Here's a Title!</h1>
a tag line here...
</div>
</div>
</div>
</body>
</html>stylesheet…
@charset "utf-8"; /* CSS Document */ body{background-color:#e2d6a9; font:Arial, Helvetica, sans-serif; margin:0px; padding:0px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } spacer { margin: 0; padding: 0; width:0px; height:0px; float:left; } #outer_body{background:url(images/outer_bg.jpg) repeat-x #0c2110; top:0px; position:relative; width:100%; height:200px; margin:0px; padding:0px; } #inner_body { margin:0px auto; position:relative; top:0px; padding:0px; width:200px; height:225px; background:#0F0 } #header_text{ margin-top:40px; width:190px; }
With the invisible spacer, added, now everything aligns to the top!
Now, a not about IE… IE + float = issues. you might have to play around to get what you want in IE. this solution did work in IE for me, but if you have other elements that are also floating, it could mess those up.