Question

I have a web page with the following content..

<div id="container">
  <div id="header"></div>
  <div id="lsidebar"> 
  </div>
  <div id="content">
  </div>
  <div id="rsidebar">
  </div>
</div>

i need a container to be centered always on the screen.

the container width would be the half of the screen.i use margin-left for centering the container.But it is different for different browser.

Another problem:i am adding float:left for lbar,content,rbar.but the rbar is moving to next line like this…

Here is my css

#container
{
        position:absolute;
    width:75%;
    left:15%;



}
#header{width:100%;height:430px;}
#content{position:relative;top:0px;width:60%;}
#rsidebar{border:2px solid black;width:100px;height:200px;float:left;}
#footer{position:relative;top:10px;width:100%;}

how to solve this issue…

Answer 1

first: give the container a width and

margin-left auto; margin-right:auto;

do you use a meyerweb reset stylesheet?