CSS, div fixed size - html

Question

I'm making a simple website, but struggling with its layout.
This is what I have to do:
and this is what I did:
<div id="cabecalho">
<div id="logo"><img src="img/logo.png" alt="Advocacia" /><img src="img/inico.png" alt="IN" id="inico" /><img src="img/twitterico.png" alt="Twitter" id="twitterico" /></div>
<div id="escritorio">ESCRITÓRIO</div><div id="atuacao">ATUAÇÃO</div><div id="contatos">CONTATOS</div><div id="artigos">ARTIGOS</div>
</div>
and this is the CSS:
body{
border: 0;
padding: 0;
margin: 0;
}
#logo {
width: 80%;
margin: 0;
padding: 0;
background-color:#ffffff;
display: table;
margin: 0 auto;
}
#twitterico{
float: right;
padding-right: 10px;
}
#inico{
float: right;
}
#cabecalho{
width: 100%;
border: 0;
padding: 0;
margin: 0;
}
#escritorio{
background-color:#243655;
height: 50px;
text-align: center;
line-height: 50px;
width: 30%;
display: inline-block;
color:#ffffff;
font-family: arial;
font-weight: bold;
}
#atuacao{
background-color:#ffffff;
height: 48px;
text-align: center;
line-height: 48px;
width: 20%;
display: inline-block;
border-left: 1px solid #aab1bd;
border-bottom: 1px solid #aab1bd;
border-top: 1px solid #aab1bd;
color:#243655;
font-family: arial;
font-weight: bold;
}
#contatos{
background-color:#ffffff;
height: 48px;
text-align: center;
line-height: 48px;
width: 19.7%;
display: inline-block;
border-left: 1px solid #aab1bd;
border-bottom: 1px solid #aab1bd;
border-top: 1px solid #aab1bd;
color:#243655;
font-family: arial;
font-weight: bold;
}
#artigos{
background-color:#ffffff;
height: 48px;
text-align: center;
line-height: 48px;
width: 30%;
display: inline-block;
border-left: 1px solid #aab1bd;
border-bottom: 1px solid #aab1bd;
border-top: 1px solid #aab1bd;
border-right: 1px solid #aab1bd;
color:#243655;
font-family: arial;
font-weight: bold;
}
so, the problem is that when I resize the window, the layout is completely screwed...
How can I solve that?
Is there a better way to do everything I did?
Thanks in advance for any help.

Answer 1

What you want to do is called Responsive Design. Depending on the current screen size (or in your case browser window), you have to rearange/shrink/remove different elements so that they can all fit on the screen. Learn how to do it here: http://learn.shayhowe.com/advanced-html-css/responsive-web-design/