Forums

iasiis

Greetings. I am working on a simple layout consisting of 4 divs nested within a single div called "master". Everything is looking good except for the fact that the "master" div is showing up 10 pixels from the top of the browser when I am trying to get it to butt up right against it.

And here is the code:


<!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 {
	text-align: center;
}
#master {
	background-color: #000000;
	width: 825px;
	position: relative;
	left: 0px;
	top: 0px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#header {
	position:absolute;
	background-color: #00CCFF;
	left:0px;
	top:0px;
	width:825px;
	height:93px;
	z-index:1;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
#menu {
	background-color: #996600;
	position: absolute;
	height: 450px;
	width: 100px;
	left: 0px;
	top: 0px;
}


#content {
	position:absolute;
	background-color: #00FF00;
	left:0px;
	top:93px;
	width:825px;
	height:450px;
	z-index:2;
}
#footer {
	position:absolute;
	left:0px;
	top:543px;
	width:825px;
	height:30px;
	z-index:3;
	background-color: #FF3333;
}
</style>
</head>
<body>
	<div id=\"master\">
		<div id=\"header\">
    	</div>
		<div id=\"content\">
  			<div id=\"menu\">
        	</div>		
		</div>
		<div id=\"footer\"></div>
	</div>
</body>
</html>

I assume this would be a simple fix for a more advanced CSS programmer. Any ideas on what the problem is? I appreciate your time and response. Thanks.

Sincerely,
IASIIS

Robskiwarrior

your browser has a default margin/padding for rendering the <html> tag from the sides.

basically add this to the top of your CSS to sort out that.


html, body {
    padding:0;
    margin:0;
}

:)

iasiis

Hey Rob. Thanks for that code! :D :idea:

treehouse : what would you like to learn today?

Forums

Problem with getting rid of margin of main div (SOLVED)