Fixed, Three Columns

Making columns requires that you use the float property and the width of all the column divs must be a combined total of less than or equal to the container div. These examples assume a fixed pixel width and not a percentage width.

Be sure to examine the HTML and CSS code for comments.

1st Approach

This is the most standard approach. For this to work,

• Use float: left on all three divs.
• In the HTML, they must be in order from top to bottom as they will appear from left to right in the browser window.
• You will likely have to measure out the width of the divs perfectly (taking into account padding) so they fit properly into the container.
• They do not necessarily have to be nested in a container div since they will align next to each other from left to right.
• This approach will work with any number of divs, not just three.

 

2nd Approach

This is less standard and exploits the "float effect". For this to work,

• Use float: left on the left div, float: right on the right div, and no float on the middle div.
• In the HTML, they must be in order of left, right then middle from top to bottom. This is so the middle column will rise up between the two that are floating. (This is how the float effect works on divs that are below the floating divs in the HTML and that aren't clearing.)
• The left and right divs should have a width, however the middle column will rise up between the two as long as it is smaller than the left over space (after the left and right column widths are subtracted from the container width). In other words, you probably won't have to worry too much about an accurate measurement for the middle div.
• Due to the float: right, you will have to use a container div to hold these three so they stay together if they are a fixed width.
• To see the middle column (it will have fallen behind the left column div) you will have to give it margin-left equal to the width of the left column.
• This approach will work with only three divs, so it's for only three columns.