RSM RSM - 2 months ago 11
HTML Question

Css div wont go to the top or all the way to the sides

I have started a website with a redbackground and i want a little bit of white at the top.

i have this code:

CSS:

body {

background-color: #ff4d4d;
}
#header {
background-color: #ffffff;
height: 20px;
}


HTML:

<!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>Fat Oblongs</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header"></div>

</body>
</html>


Which produces:

Answer

You should make sure your body and html elements have no margin and padding:

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

Sidenote: you also really should not use XHTML 1.0 Transitional as your doctype. If possible, simply use HTML5 (this has no influence over your borders, but still, don't use transitional doctypes unless you have a very good reason to do so)

<!doctype html>