Make div full size of window with NO margin

StackOverflow https://stackoverflow.com/questions/21152371

  •  28-09-2022
  •  | 
  •  

Question

I hate to even ask something that seems so dumb but I just dont get this. All I want to do is have a blue div at the top of my window that stretches across the entire window. I thought width:100%; would do just that but its leaving gaps around the edges for some reason.

My 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>Untitled Document</title>
<link href="_css/wikiToolBox.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="iWikiTopPanel" class="iWikiTopPanel"></div>
</body>
</html>

My css:

@charset "utf-8";
/* CSS Document */

.iWikiTopPanel{

    width:100%;
    height:200px;
    background-color:#205081;
    margin:0px;
    border-bottom: 1px solid #2e3d54;
    clear: both;
    float:left;

}

body{
    padding:0px;
   /*set This thinking it might fix the issue, it didnt*/
}

Here's a pic of what I end up with:

enter image description here

And here's the element as seen in Chrome's element inspector:

enter image description here

I dont get it. So where is the padding/margin coming from and how do I get rid of it?

Was it helpful?

Solution

Try:

body{
  margin:0;
}

You have a margin against your <html> tag.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top