将"内容"区域划分为两列？

Question

我正在考虑从HTML表转换到纯CSS布局.到目前为止,我得到的一件事就是如何正确地布局页面.

我可以:

• 头
• 左导航
• 内容
• 页脚

像这样:

________________________ 
|      Header           |
|_______________________|
| Left |     Content    |
| Nav  |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

但是,在某些页面上,我希望能够将"内容"区域划分为以下内容:

________________________ 
|      Header           |
|_______________________|
| Left | info | info    |
| Nav  |      |         |
|      |      |         |
|      |      |         |
|      |      |         |
|      |______|_________|
|      | Other info     |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

任何人都知道这样的事情会怎么做？甚至是一个很好的网站,有助于这种事情？

Answer 1

第一次布局预览(在线演示):

HTML:

<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">Content</div>
</div>
<div id="footer">Footer</div>

CSS:

/* sizes */
#main-wrap > div { min-height: 450px; }


#header,
#footer {
    min-height: 40px;
}

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}   

第二次布局预览(在线演示):

html与第一个布局非常相似,但我们包含一个包装器#content-wrap:

<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">
        <div id="info-wrap">
            <div class="info">small info </div>
            <div class="info">small info</div>
        </div>
        Content
    </div>
</div>
<div id="footer">Footer</div>

css也类似,顺便提一下我们添加一些css规则来定位新的div:

/* sizes */
#main-wrap > div { min-height: 450px; }

#header,
#footer {
    min-height: 40px;
}

.info { min-height: 80px; }

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

#info-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

.info {
    width: 50%;
    float: left;
}

更新:改进的样式