リキッドレイアウト

課題

課題の回答です


http://yuto-m.sakura.ne.jp/admin/
↑ こちらからサーバーにアップした課題が見れます。

まずはコードです。

HTML

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>liquid-layout</title>
  <link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
  <div id="container">
    <header></header>
    <div id="wrapper">
      <div id="left_side"></div>
      <div id="right_side"></div>
      <div id="main"> </div>
    </div>
    <footer></footer>
  </div>
</body>
</html>

CSS

@charset "utf-8";

body,div,header,footer{
  margin: 0;
  padding: 0;
}

#container{
  margin: 50px auto 0 auto;
  min-width: 600px;
  max-width: 1024px;
  width: 80%;
  background-color: #cccccc;
}

header{
  margin-bottom: 10px;
  height: 80px;
  background-color: #cc6666;
}

#wrapper{
  overflow: hidden;
  margin-bottom: 10px;
  width: 100%;
}
#left_side{
  float: left;
  margin-right: 10px;
  width: 195px;
  height: 400px;
  background-color: #ffcc66;
}
#right_side{
  float: right;
  width: 195px;
  height: 400px;
  background-color: #cccc00;
}
#main{
  margin: 0 205px 0 205px;
  min-width: 300px;
  height: 400px;
  background-color: #6699cc;
}

footer{
  clear: both;
  height: 80px;
  background-color: #ffcccc;
}

簡単に出来るだろうと思いましたが、少し苦戦しました。
ウィンドウを小さくしすぎて、レイアウトが崩れないように、min-width を指定しています。