Issues with dynamic layout

Question

I'm trying to do a dynamic layout to my website, but I'm having problems with the menu and the general content. When I'm at 1920x1080, margin and position still fine, but when I decrease this size, the general content come over the fixed menu.

How can I apply this margin between lateral sidebar(where the menu and the logo will be) and the general content?

 <div id="header">
                <div id="logo">
                    <a href="#">aaaaaaaaa</a>
                </div><!--logo-->

            <div id="center">
                <div id="wrap">
                    <ul id="">
                        <li><a href="#inicio">In&iacute;cio</a></li>
                        <li><a href="#portifolio">Potifólio</a></li>
                        <li><a href="#clientes">Clientes</a></li>
                        <li><a href="#sobre">Sobre</a></li>
                        <li><a href="#contato">Contato</a></li>
                    </ul>
                </div>
            </div><!--menu-->
        </div><!--header-->

        <div id="content">
                <div id="inicio">
                    inicio
                </div>

                <div id="contato" style="background-color:blue">
                    contato
                </div>
       </div>

        </div><!--box-->

css:

*{margin:0;padding: 0;}
body{
  background-color:#fffbe7;
  overflow:hidden;
}

html, body, #center {
    height: 100%;
    position:relative;
    margin:0px;
    padding:0px;
}
#header{
  position: fixed;
}
#center #wrap {
    height: 50%;
    left: 1%;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 50%;
}
#center ul{
  list-style: none;
  padding:0;
  margin:0;
  border-right:1px solid #000;
  padding-right: 20px;
}
#center ul li a{
  color:#333;
  text-decoration: none;
  font-family: Georgia;
  font-size: 30px;
}
#center ul li a:hover{
  text-decoration: underline;
}

#header{
  width:20%;

}


#content{
    position: absolute;
    top: 0%;
    width:80%;
    margin-left:10%;

}
#content div{
  height: 400px;
  background: red;

}

You can see the code and demo here:
http://jsfiddle.net/7eAJg/1/

Answer 1

Try removing the position:absolute on the content div, because absolute position is from the left side of the window, since your margins are % they are not the same. Let them stack as they should, without forcing the absolute.

Answer 2

Media queries will help you deliver and alter your styles for different sized browsers.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries