Forums

How to close gap between masthead and container

Permalink
This is my code.

<body>

<div id="masthead">

<h1>MASTHEAD</h1>
<div id="top_left">
<h1>TOP_LEFT</h1>
</div>
<div id="header">
<h1>HEADER</h1>
</div>
</div>
<div id="container">
<h1>CONTAINER</h1>
<div id="left_col">
<h1>LEFT_COL</h1>
</div>
<div id="page_content">
<h1>PAGE CONTENT</h1>
</div>
</div>
<div id="footer">
<h1>FOTTER</h1>
</div>

</body>




AND THE CSS

.body{

background-color:white;
}
#masthead {
position: relative;
width: 100%;
background-color:orange;
padding-left:400px;
}

#top_left {
width: 200px;
position: absolute;
left: 0px;
top: 0px;
background-color:maroon;
}

#header {

background-color:green;
padding-left:200px;
}

#container {
position: relative;
width: 100%;
background-color:gray;
padding-left:200px;
}

#left_col {
width: 200px;
position: absolute;
left: 0px;
top: 0px;
background-color:fuchsia;
}

#page_content {

background-color:blue;
}

#footer {
background-color:red;
}

1 Attachment