上一篇学习了两列定宽和两列自适应结构并且遗留了一个两列不等高的问题，今天就把两者结合一下试试，并且学习一些解决两列不等高问题的方法

一、单列定宽单列自适应结构

上一次学习到如果两列的盒模型宽度总和超过父元素的宽度，或者大于100%，就会发生错位的现象。但是，如果让一列的宽度采用百分比或者auto，一列的宽度采用像素，怎么才能让这两个宽度单位不同的盒子组合在一起，完美实现单列定宽单列自适应结构。
下面我们就来学习一个，提高一下自己的滋似水平！▇-▇ ，将上节的代码稍微修改一下，把mainBox的宽度设置为70%，sideBox的宽度设置为200px。

<style type="text/css">
    ……
    .mainBox{
        float: left;
        width: 70%;
        color: #FF0000;
        background-color: #333333;
    }
    .sideBox{
        float: right;
        width: 200px;
        color: #FFFFFF;
        background-color: #999999;
    }
    ……
</style>

今天比较忙，但还是挤时间把今天的博客写出来了，下面就赶紧进入正题了 ヾ(=^▽^=)ノ

一、两列定宽的页面布局

两列的页面布局是我们经常看见的一种页面结构，（蛤？我的博客首页！）这种布局方式在内容体现上可分为主要内容区域和侧边栏。首先让我们先把HTML的骨架搭好。

<div id="header">这里是头</div>
<div id="container">
    <div class="mainBox">这里是主要内容区域</div>
    <div class="sideBox">这里是侧边栏</div>
</div>
<div id="footer">这里是脚（ps:没脚气，不臭）</div>

好了，骨架已经搭好了，下面开始用我们的CSS给骨架上贴肉了。就从最简单的两列定宽开始吧。在这里两列定宽主要是指将mainBox和sideBox这两个div的宽度值固定。再将它们分别放在内容区域的两侧。我们将container的宽度值设置为950px，高度为250px,上下外边距为10px。mainBox的宽度值设置为680px，高度为250px。sideBox的宽度值设置为270px，高度也为250px。

一、准备工作

首先，我们准备一个存放诗句的div容器放在body中。

<div class="poemBox">
    <h1>《采桑子·长者》</h1>
    <address>当代·无名氏</address>
    <p>人间易老他不老，时刻一秒</p>
    <p>今又一秒，香江怒斥分外好</p>
    <p>苟利国家生死以，不若代表</p>
    <p>更若代表，西方国家谁未到</p>
</div>

其效果如下图所示：

一、盒模型的组成

盒模型是CSS布局的最基本组成部分，它是指定页面元素如何显示及在某种方式上如何相互交互。在页面上的每个元素都是以一个矩形的表现形式存在的，每个矩形是由元素的内容、内边距(padding)、边框(border)、外边距(margin)组成的，如下图所示：

今天心情真的很沉重，好像有块石头压在心口，让人喘不过气来。