Adding a border pushes the wrapper up and makes the div content overflow?
I've been trying to find a way to get around this and have Googled for over an hour, but I'm not sure how to get around it. If I add a border to the wrapping div, it pushes the wrapper up to the top of the page, while the floating divs stay in the same position. I've tried playing with overflow and relative and absolute positioning.
Here is the css
html, body
{
height : 100% ;
margin : 0 ;
padding : 0
}
html { background : #FFFFFF }
#wrapper
{
background : #0066FF ;
color : white ;
height : 780px ;
width : 1620px ;
font : 16px "Arial", sans-serif ;
margin : auto ;
border : 4px solid black
}
#header
{
height : 90px ;
text-align : center ;
color : black ;
background : #66CCFF ;
padding : 3px 0px ;
margin : 100px 0 10px ;
clear : both
}
#header h1
{
font-weight : bold ;
font-size : 35px ;
padding : 20px 0
}
#left
{
float : left ;
width : 180px ;
height : 660px ;
background-color : #66CCFF ;
padding : 5px ;
margin-right : 25px
}
#content
{
float : left ;
background-color : #66CCFF ;
color : black ;
height : 660px ;
width : 1140px ;
margin-right : 25px ;
padding : 5px
}
#right
{
float : left ;
background-color : #66CCFF ;
color : black ;
width : 220px ;
height : 660px ;
padding : 5px
}
#footer
{
background-color : black ;
clear : both
}
I also made a JSfiddle which contains HTML and an example of a wrapper with a darker blue background bouncing up the page.
source to share
This type of problem is usually caused by the default space and padding. Browsers have a default setting which is the default, for example 5 or 10 pixels, which is sometimes very inconvenient. Of course, this doesn't always cause a problem. Whenever I face this kind of problem, I try to add padding 0 and margin 0 to every object in my code, even html and body, like this:
#example {
margin: 0px;
padding: 0px;
};
try [I see you have this in several but not every object]. I don't know for sure if this will help solve the problem, but it's worth trying and it often works for me. This is an unpleasant problem for everyone.
EDIT: [removed comment about closing tags]
source to share
Okay, the answer to my question. I managed to get around this by leaving the div heading outside the wrapper. This way I could place a border around the header and the wrapper without moving the page up. Of course, I used border-bottom: none on the header and border-top: none on the wrapper, then the border looked great with the content where it should be.
I don't think this is the best answer because I have not fully identified what caused the problem, but I will keep looking.
source to share