cssレイアウトを考える際の概念として，
padding, border, marginを考える必要がある。何も指定しなければ0px

ブロックcontainerの中にブロックcontent-topとブロックcontent-bottomがあるhtmlについて考える。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <div id="container">
      <div id="content-top">
      </div>
      <div id="content-bottom">
      </div>
    </div>
  </body>
</html>

width

固定値

px, emなどの単位で指定可能

相対値

width:x%: 該当要素の親要素の値に対しての長さの比x%を指定.
width:auto: width: 100%を指定した時と挙動が似るが，padding-x:a b;を指定した場合，親要素の長さ-(a+b)になる。

サンプルcss

#container{
  background-color: blue;
  width:50px;        //要素の幅
  height:100%;       //ブラウザの表示部の高さ
  padding: 0px 10px; // 左右に10pxパディングこのブロックの幅は width + padding*2 = 70pxになる
}

#content-top{
  background-color: red;
  padding: 0px 10px; //左右に10pxのパディング
  width:auto;
  height:50%;
}


#content-bottom{
  background-color: yellow;
  padding: 0px 10px;　//左右に10pxのパディング
  width:100%;
  height:50%;
}

結果

css 入門

width

固定値

相対値