html - 划分垂直列并对齐它们

Question

我正在尝试创建类似于以下布局的布局:

 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
|      |                     |      |
|      |                     |      |
|      |                     |      |
|  1   |                     |   2  |
|      |                     |      |
|_ _ _ |          5          |_ _ _ |
|      |                     |      |
|      |                     |      |
|   3  |                     |   4  |
|      |                     |      |
|      |                     |      |
|_ _ _ |_ _ _ _ _ _ _ _ _ _ _|_ _ _ |

我在两件事上遇到了麻烦:

1. 划分垂直列；
2. 将 1 和 2 与 5 对齐；

The website with the example/code

Answer 1

#content {
    margin: 20px 0px 0px 20px;
    width:180px;
    background-color: green;
    overflow: auto;
    padding-left: 10px;
}

FIDDLE