Typical layouts with CSS use a wrapper <div> to contain other div tags in the layout.
In the layout below, the wrapper is the grey box (outlined with a border).
#div_1 (yellow box) and #div_2 (blue box) have been inserted into it. The boxes stack up on one another (by default) just as they do in the static layouts.
#wrapper {
background-color: #CCC;
width: 500px;
}
#div_1 {
background-color: #FF9;
width: 250px;
padding: 10px;
}
#div_2 {
background-color: #9FF;
width: 250px;
padding: 10px;
}
To create columns, the <div> boxes inside the wrapper need to have a float property of left applied. This places the boxes side-by-side.
By assigning a float property to #div_1b and #div_2b, the wrapper no longer extends down to wrap around them. The wrapper is not visible in the layout but it is still controlling the position on the page of the contained <div> tags. The contained boxes hang down from the wrapper like flags on a line.
#div_1b {
background-color: #FF9;
padding: 10px;
width: 230px;
float: left;
}
#div_2b {
background-color: #9FF;
padding: 10px;
width: 230px;
float: left;
}
Note: the padding value is subtracted from the width of the <div> so that it will fit into the available space.
The layout below includes a footer div within the wrapper to extend it down and around all content. The grey background of the wrapper can be seen in the space beneath #div_1c.
The footer has a property of Clear:both. The clear property overrides the float left properties of #div_1c and #div_2c. Without this, the footer would be partially positioned under the other boxes.
#div_1c {
background-color: #FF9;
padding: 10px;
width: 230px;
float: left;
}
#div_2c {
background-color: #9FF;
padding: 10px;
width: 230px;
float: left;
}
This extra content in this <div> reveals the grey background of the wrapper.