HTML, CSS > 2段組(浮動ボックス)2

浮動ボックス(float box)の2段組。div要素をフロート。

by s_hiroshi

HTML

<div class="section">
    <h2>Heading2</h2>
    <div class="image-left">
        <img src="http://farm9.staticflickr.com/8166/7320702374_3ea9c0312b_n.jpg" alt="flicker photo">
    </div>
    <div class="box">
         <h3>Heading3</h3>
         <p>box.box.box.</p>
         <h3>Heading</h3>
         <p>box.box.box</p>
    </div>
</div>

CSS

.section {
    overflow: hidden;
    zoom: 1; /* for IE6 */
    width: 570px;
    padding: 15px 15px;
    margin-bottom: 15px;
    background: #EEE; 
    line-height: 1.6;
}
.section h2 {
    width: 560px;
    padding: 5px;
    margin-bottom: 10px;
    background: #DDD;
}
.section .box {
    overflow: hidden;
    zoom: 1; /* for IE6 */
    /*float: left; 【重要】付けない */
    padding: 10px;
    background: #fff7dc;
}
.section .box p {
    padding: 10px;
    background: #FC0;
}
.image-left {
    float: left;
    margin-right: 25px;
}