There shouldn’t be any space between these two block elements
My page has a three column layout, with left and right columns being positioned absolutely, while center column uses relative positioning. All three columns should be removed from the top of the page by a distance of 184px, but for some reason the distance between the top of the page and the center column is greater than 184px. I realize center column is still in the normal flow of the document, but since padding and margins are both set to zero, then the header and center column should be touching. Any idea what开发者_C百科’s going on?
body
{
padding:0px;
margin:0px;
}
#header
{
padding:0px;
margin:0px;
background-image:url(images/HeaderSlice.gif);
background-repeat:repeat-x;
height:184px;
}
#centerCol
{
position:relative;
margin-left:200px;
margin-right:200px;
}
#leftCol
{
position:absolute;
top:184px;
left:0px;
width:200px;
}
#rightCol
{
position:absolute;
top:184px;
right:0px;
width:200px;
}
HTML file:
...
<body>
<div id="header">...</div>
<div id="centerCol">...</div>
...
thanx
EDIT:
It works now. Inside #centerCol I’ve had another div ( with id=”userManagement” ) and as it turned out the top margin of an #userManagement inner overlapped with the top margin of #centerCol
<div id="centerCol">
<div id="userManagement">...</div>
</div>
#userManagement
{
margin-top:16px;
margin-left:10px;
font-size:12px;
}
thank you all for helping me
a. The #header might have content that causes overflow - so that it expands over its height. try adding "overflow:hidden" to the #header element. b. Are you certain that the centerCol has margin-top and padding-top set to 0? your snippet does not show this.
c. open the page in Firefox with FireBug, and look at the positioning data in the firebug window. it gives a great insight over positioning problems
You can use the html class tag, to get rid of a probably added padding at the top of the page. This is caused by your specific browser (Firefox?) since chrome is not showing this behavior.
That would be:
html, body
{
margin:0;
padding:0;
}
加载中,请稍侯......
精彩评论