I'm currently working on a standard header, left column, middle column, right column, and footer layout. I've grouped the left, middle, and right divs inside a midBlock div. To illustrate, here's an image:
Even though I've added a bottom margin of 10px to the midBlock, it seems to be overlapping with the footer. Why is this happening? And what steps can I take to resolve it?
You can view the example on JSFiddle.
This is the CSS code I'm using:
body {
background-image:url('./img/GreenLetters.jpg');
}
#blankPage {
background-color: #fffffd;
width: 1020px;
margin: 0px auto;
border: 0px;
padding: 10px;
position:relative;
}
#header {
background-color: #000000;
color:red;
width: 1000px;
margin: 0px 0px 10px 0px;
border: 0px;
padding: 10px;
}
#midBlock {
margin: 0px 0px 10px 0px;
border: 0px;
width: 1020px;
position:relative;
left:0px;
top:0px;
}
#leftCol {
background-color: #123456;
width: 160px;
margin: 0px;
border: 0px;
padding: 0px;
position:absolute;
left:0px;
top:0px;
}
#midCol {
background-color: #654321;
width: 660px;
margin: 0px 10px 10px 0px;
border: 0px;
padding: 10px;
position:absolute;
left:170px;
top:0px;
}
#rightCol {
background-color: #567890;
width: 160px;
margin: 0px;
border: 0px;
padding: 0px;
position:absolute;
left:860px;
top:0px;
}
#footer {
background-color: #000000;
color:red;
width: 1000px;
margin: 10px 0px 0px 0px;
border: 0px;
padding: 10px;
position:relative;
left:0px;
top:0px;
}