不使用表格的特殊css布局

我正在尝试构建此css模板：

以下是每个砌块的说明，包括尺寸和高度：

第一区

• 宽度：页面宽度
• 高度：100px

第2区

• 最小宽度：300px
• 宽度随内容的增加而增大
• 高度：块1留下的所有高度

第3区

• 宽度：块2留下的所有宽度
• 高度：块1和块4留下的所有高度

第4区

• 宽度：块2留下的所有宽度
• 高度：150像素

以及20px的每个块之间的边距。 最终布局的宽度和高度需要填满页面的整个空间，但不能超过（无滚动条）

我设法使用一个表来实现它，但我更希望使用一个基于div的css。你知道怎么做吗

附言：我在用指南针

编辑： 下面是我尝试做的一个演示：

但我使用的html是：

<table>
    <tr>
        <td colspan="2" class="block1">
            <div class="block">
                Block 1
            </div>
        </td>
    </tr>
    <tr>
        <td rowspan="2" class="block2">
            <div class="block">
                Block 2
            </div>
        </td>
        <td class="block3">
            <div class="block">
                Block 3
            </div>
        </td>
    </tr>
    <tr>
        <td class="block4">
            <div class="block">
                Block 4
            </div>
        </td>
    </tr>

</table>

第一区
第2区
第3区
第4区

给你……它又粗又快，有很多问题……可能需要调整，但这只是一个开始

---

这不是一个适合stackoverflow的问题。提示：阅读浮动。我们不是来为您编写代码的。我们将帮助修复现有代码，但现在您只是想让我们为您完成工作。我想您可能会觉得这个挑战很有趣。我非常熟悉css，这是一个复杂的问题。棘手的是，区块4不在区块2之下，而是在区块2旁边。因此，很难使用float，因为您无法设置块3的高度（需要填充空间）。选项：1）HTML表2）3）jQuery 4）使用CSS3进行实验，或者看看可能的情况（取决于所需的浏览器支持）。一般来说，当有一些东西很难创建时，不要反对使用表。这看起来很不错！但我不确定是否要用浮子。因为块3需要填充所有可用空间（其中不一定有内容）。块2和块3的宽度也不应为百分比。块2需要随着内容的增长而增长，块3需要调整其大小。看起来这是一个很难解决的问题…为什么你不把2和3放在一个容器里，把4放在容器外面，作为一个粘性的页脚…那么块4就不会填满整个页面了吗？是的。。。也许你可以在网上的某个地方找到一本pdf/ebook版的CSS:The Missing Manual，因为他们在那本书中有这个精确的布局，以及它是如何实现的，如果我没记错的话。

#block1 {
width:100%;
height:100px;
background:black;
margin-bottom:20px;
}

#block2 {
float:left;
min-width:300px;
width:20%;
height:100%;
margin-right:20px;
     }

#block3 {
width:70%;
float:left;
background:red;
min-height:400px;
margin-bottom:20px;
    }

#block4 {
width:70%;
float:left;
height:150px;
     }