Question

I’m very new to CSS and I spend quite a while trying to research how to position elements “in thirds” so that even when the window changes dimensions the elements stay “in thirds”. The first picture below is when the browser is fully opened and the second is when it is horizontally contracted. I am looking for this method but I don’t know the name of the technique or what to do (like I said I’m really new). I’m aware that the tabs are using what is called “closing doors” but I’m more interested in their positioning.

For example if I wanted three elements spaced out unevenly
to contract as follows, how would I go above achieving this?

instead of:

Answer 1

check this solution. This is flexible and if more menu comes it will accommodate it automatically.

http://jsfiddle.net/geymU/

<div id="nav">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Address</li>
    <li>Phone</li>
  </ul>
</div>​

CSS

#nav{
   background:#c1c1c1;
}
#nav ul{
  display:table;
  width:100%;
}
#nav li{
  padding:5px;
  display:table-cell;
  background:#333;
  border:1px solid;
  color:#fff;
}​