Recently I came across a funny situation. I’ll show a snippet of my css code for information:
.outerbox{
position: absolute;width: 1200px;
left: 15%;
background: #ffffff url(‘http://siteDN.com/images/header-3.jpg’) no-repeat top center;
background-position: center 50px ;}
.innerbox {
width: 680px;
position: absolute;
left: 30%;
top: 440px;
text-align: left;
}
So basically, I had a main outer box, that wrapped around everything, and then an inner box that had the websites content.
The problem was that because my innerbox was dropped down 440px, and absolute, the outerbox wouldn’t surround the entire pages content with its box properties, so the page would show up with the content (innerbox) extending down below the border of the outerbox, which was no good.
To fix this, I changed the position of the innerbox to relative, and added a top-margin: 440px instead of a top: 440px, which fixed everything:
.bigbox {
position: absolute;width: 1200px;
left: 15%;
background: #ffffff url(‘http://siteDN.com/images/header-3.jpg’) no-repeat top center;
background-position: center 50px ;}
.thisis {
width: 680px;
position: relative;
left: 30%;
margin-top: 440px;
text-align: left;
}
I spent a while trying to get this bugger straight.
This box tutorial helped me out.