0

This HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" /
<title>Site</title>
</head>

<body>
<div id="top"></div>
<div id="menu"></div>
<div id="main">
</div>
<div id="content"></div>

</body>
</html>

And this CSS

#top {
	position: relative;
	width: 100%;
	height: 100px;
	background-color: #3A3226;
	color: #FFFFFF;
	font-family: verdana, helvetica, sans-serif;
}
#menu{
	position:relative;
	width:100%;
	height: 75px;
	background-color: #B96E00;
	color: #000000;
	font-family: verdana, helvetica, sans-serif;
}
#main{
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #CCCCCC;
}
#content{
	position: absolute;
	top: 225px;
	left: 200px;
	background-color: #BFA88E;
	width: 600px;
	height: 548px;
	color: #FFFFFF;
	font-family: verdana, helvetica, sans-serif;
}

Produces a white border around the div's separating it from the page and stopping it from fitting snuggly within the browser, can anyone explain what I am doing wrong?

3
Contributors
2
Replies
3
Views
8 Years
Discussion Span
Last Post by almostbob
0

Ries,

To be rid of your white border, you need to ensure that the page margin is reduced to zero. Try adding to your CSS:

body { margin:0; }

You will then typically want to add some CSS padding to your divs' to prevent their content abutting the edge of the page (unless that is an effect you want), eg:

#menu{ padding:10px; }

Airshow

0

If this is actually copied from your html file you may want to close the link

<link rel="stylesheet" type="text/css" href="style.css" /
<link rel="stylesheet" type="text/css" href="style.css" />

and complete the html declaration and doctype so that the styles you are choosing, actually work
W3c Recommended list of DTDs

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.