Home/ Questions/Q 579123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T14:20:00+00:00

My page has a three column layout, with left and right columns being positioned

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0