Geek Answers Handbook

Css div will not go up or completely to the side

I started the site with redbackground and I want a little 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>

What produces:

+8
html css
source share
3 answers

You must make sure that the body and html elements do not have margins and indents:

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

Sidenote: You should also not use XHTML 1.0 Transitional as your doctype. If possible, just use HTML5 (this does not affect your boundaries, but, nevertheless, do not use transitional doctrines unless you have good reason for this)

 <!doctype html>
+14
source share
 body, html { border: 0; padding: 0; margin: 0; }

Browsers have several indentation / margin pixels around the edges of the window. The above CSS removes everything.

+6
source share

you need to reset margin: filling the body to zero

 body {margin:0;padding:0;}

http://jsfiddle.net/79w9Y/

+1
source share

More articles:


All Articles