Hi
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’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