Member Avatar for Ries

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
  • 81 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for Airshow

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

Member Avatar for almostbob

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.