riquidデザイン 2column

HTML CSS

ウィンドウの幅を変えても2カラムを崩さず、
表示させる方法。
とにかく、ソースを記述していきます。

2column　その1

【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 -->
    <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%;
}

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

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

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

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

2column　その2

今度は#contentの中が2段。

【HTML】

<body>
  <header>
      <h1>見出し1</h1>
  </header>
    
  <div id="wrapper">
    <div id="container">
      <div id="praimary">
        <div id="content">
          <h2>見出し2</h2>
          <p>内容が続いていきます。</p>

          <p>内容が続いていきます。</p>

          <p>内容が続いていきます。</p>

          <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><!-- /#wrapper -->
  
  <footer>
      <small>copyright &copy; 2013 All Rights Reseaved.</small>
    </footer>
    
  <!--  -->
</body>

【CSS】

h2 {
margin: 0 40px 20px 10px;
padding: 0 0 6px 10px;
font-size: 18px;
line-height: 1.5;
border-left: solid 4px #F63;
border-bottom: solid 1px #f63;
}

p {
float: left;
text-indent: 1em;
max-width: 400px;
min-width: 200px;
margin: 0 20px 10px 10px;
}

header {
position: fixed;/* 位置をブラウザに固定 */
width: 100%;
background-color: #ddd;
padding: 10px;
text-align: center;
height: 40px;
line-height: 40px;
}

#wrapper {
width: 100%;
padding: 40px 0;
line-height: 1.5;
overflow: hidden;
}

#container {
float: left;
width: 100%;
}

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

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

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

footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
height: 50px;
line-height: 50px;
background-color: #ddd;
}

どちらも長い文章が入っていないと？？って感じですね。
次回は3column！