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
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

: the visible white "frame" is not a mystery in the markup you posted — it comes from the browser and from the way the page is laid out. correctly flagged the browser's default spacing; was right to point out the broken stylesheet include and the need for a proper doctype (quirks mode changes how spacing and the box model behave).

Key points and practical fixes (in order of highest impact):

  • Put your page into standards mode with the HTML5 doctype: <!DOCTYPE html>. That avoids many cross‑browser oddities.
  • Remove the browser defaults (either with a tiny reset or a utility rule) so the page background and your containers sit flush.
  • If you want a full‑bleed background, set the page/container background rather than relying on child elements. That prevents the white default from showing through when layout shifts occur.
  • Avoid using absolute positioning for the main layout unless you really need it. The position:absolute + fixed left/top values in your snippet can leave uncovered areas or cause horizontal scroll; use normal flow, margins, Flexbox or Grid for predictable full‑width behavior.
  • When you use percentage heights, make sure ancestor elements have an explicit height (or use viewport units such as vh) so height:100% behaves as expected.
  • Consider box-sizing: border-box so padding/borders do not inflate widths and create scrollbars or gaps.

Quick troubleshooting checklist:

  • Fix and validate the HTML (close tags, correct link syntax).
  • Open developer tools, inspect html and body computed margins/padding to see which element is contributing to the gap.
  • Temporarily give body a contrasting background to confirm whether the gap is margin/padding or uncovered background.
  • Replace the absolute layout with a container + normal flow and test at several viewport widths.

These steps remove the white border reliably and make the layout robust across browsers and viewport sizes.

Recommended Answers

All 2 Replies

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.