• Locked
1 reply [Last post]
Wed, 2008-11-19 21:38
Dragonslayre
Dragonslayre's picture
User offline. Last seen 3 years 25 weeks ago. Offline
newbie
Joined: 2008-11-19
Posts: 1
Points: 0

Hi, I'm trying to align the container in my html up at the very top of the web browser in a nice clean way. I've found that if I put overflow:hidden; in my #container CSS, then that works, but I'm wondering if there is a proper way that I'm missing?

Thanks a lot Smile

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style>
  html,body  {
	margin:0;
	padding:0;
  }
 
  #container{
	margin:0;
	padding:0;
	width:80%;
	background-color:#ccccee;
	height:10em;
	margin-left:auto;
	margin-right:auto;
  }
 
</style>
</head>
 
<body>
	<div id="container">
		<div id="header">
			<h1>Header text</h1>
		</div>
 
		<div id="content">
			<p>paragraph 1</p>
			<p>paragraph 2</p>
		</div>
	</div>
</body>
 
</html>

Top
Tags:
Wed, 2008-11-19 22:24
#1
wolfcry911
wolfcry911's picture
User offline. Last seen 23 weeks 2 days ago. Offline
rank Guru
Guru
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3222
Points: 235

It's collapsing margins. IE

It's collapsing margins. IE handles it incorrectly. The h1 top margin is actually extending outside both the header and container divs. You could zero said margin, or add a 1px border or 1px padding to the container or header.

Top
  • Locked