I am implementing a typical header, left col, mid col, right col, footer layout. I have wrapped the lft,mid,right div
s in a midBlock div
. I am including a picture to make it clear:
I have set a bottom margin of 10px on the midBlock, however, it overlaps with the footer. Why? And how to solve it?
Here is the JSFiddle .
Here is my CSS:
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.