riquidデザイン　3column

HTML CSS

前回に引き続き、リキッドデザインです。
今回は3カラム。

ソースを記述していきます。


【HTML】

<body>
  <div id="wrapper">
    <header>
      <h1>見出し</h1>
    </header>
    
    <div id="container">
      <div id="praimary">
        <div id="content">
          <p>内容を記述していきます。</p>
        </div><!-- /#content -->
      </div><!-- /#praimary -->
      
      <div id="secondary">
        <ul>
          <li>リスト1</li>
          <li>リスト2</li>
          <li>リスト3</li>
          <li>リスト4</li>
          <li>リスト5</li>
        </ul>
      </div><!-- /#secondary -->
    </div><!-- /#container -->
    
    <div id="third">
      <ul>
          <li>リスト1</li>
          <li>リスト2</li>
          <li>リスト3</li>
          <li>リスト4</li>
          <li>リスト5</li>
        </ul>
    </div><!-- /#third -->
    <footer>
      <small>copyright &copy; 2013 All Rights Reseaved.</small>
    </footer>
  </div><!-- /#wrapper -->
</body>

【CSS】

#wrapper {
width: 100%;
line-height: 1.5;
}

header {
background-color: #ddd;
padding: 10px;
}

#container {
float: left;
width: 100%;
margin-right: -145px; /* 右方向にマイナスのマージンを指定する事でえぐる */
background-color: #FC9;
}

#praimary {
float: right;
width: 100%;
margin: 10px 0 10px -145px; /* 左方向にマイナスのマージンを指定する事でえぐる */
background-color: #000;
}

#content {
margin: 0 155px;
padding: 10px;
background-color: #9FC;
}

#secondary {
float: left;
width: 125px;
margin: 10px 0 10px 0;
padding: 10px;
background-color: #F63;
}

#third {
float: right;
width: 125px;
margin: 10px 0;
padding: 10px;
background-color: #69F;
}

footer {
clear: both;
text-align: center;
height: 50px;
line-height: 50px;
background-color: #ddd;
}

サイドのメニュー部分の大きさはそのままに、
真ん中の#content部分だけ固定させないようになってます。