CSS columns

Here is a perfect solution to the 3 column layout in CSS. The left and right columns are floated left and right respectively. The middle column has left and right borders relative to the left and right column widths (either in pixels or a percentage). It is important to code them in the right order: left, right then middle. My example uses inline styles but these could be moved into a CSS file. Underneath the middle column is a cleaner DIV. This prevents any subsequent content from being affected by previous float attributes - treat it as a format resetter.

<div style="text-align: center;">
 
    <div style="margin: auto; text-align: left; width: 75%">
 
        <div style="background-color: red; margin: 0; padding: 5px;">Top</div>
 
        <div style="background-color: orange; float: left; margin: 0; padding: 5px; width: 100px;">Left</div>
 
        <div style="background-color: yellow; float: right; margin: 0; padding: 5px; width: 100px;">Right</div>
 
        <div style="background-color: green; margin: 0 100px; padding: 5px;">Middle</div>
 
        <div style="clear: both;"></div>
 
        <div style="background-color: blue; margin: 0; padding: 5px;">Bottom</div>
 
    </div>
 
</div>