Three Column Layout Builder

Perfect three column layout In Less Than 15 lines of css.

This three column layout was designed around standard screen resolution size of 1024x768.

Change Column Width Here
(No higher than 490px)

Change Column Color Here

Each column has a nested div tag that has a margin of 15px to server our content up to our viewers in a cleaner fashion.

This column has a width of 165px and margin left of -165px and may be altered accordingly.

All our columns meet a perfect three column layout specifications and are 100% CSS. The difference between this layout and the three column layout in 10 lines of CSS is that this layout uses only css and no background images to color our cells.

This center column is a width of 650px and has two black borders on the left and right side but no top and bottom borders. It also has a margin of both left and right that are exactly 165px; the same width as our left and right columns and maybe altered accordingly.

If you would like to test out how each column has and independent height control of the overall layout click anyone of the "Add Content" buttons within anyone of the columns. This is not only a demo but a builder as well, if you would like to change your column widths you can do so at the top input box. Once you have your desired column width you can click the generate code button in the center column to gather both the new CSS and HTML for your desired layout changes.

Kinda cool if you ask me!

<div id="wrap" class="main">
                <div id="float" class="main float leftRightBdr">
                <div id="header" class="float topBottomBdr">
                HEADER
                </div>
                    <div id="center" class="float leftRightBdr">
                        
                        <div id="left" class="columns float">
                        LEFT COLUMN
                        </div>
                        
                        
                        <div id="right" class="columns">
                        RIGHT COLUMN
                        </div>
                        
                        
                        <div class="content" id="content">
                        CENTER COLUMN
                        </div>
                    </div>
                    <div id="footer" class="float topBottomBdr">
                        Footer  
                    </div>
                </div>
            </div>

Footer