Floating Columns

Floating Columns

Before Flexbox and CSS Grid, floats were the primary way to create multi-column layouts. While modern tools are preferred today, understanding float-based columns helps you work with legacy code and deepens your understanding of CSS flow.

Basic Two-Column Layout

<div class="row clearfix">
    <div class="col-left">
        <h2>Sidebar</h2>
        <p>Navigation or links here.</p>
    </div>
    <div class="col-right">
        <h2>Main Content</h2>
        <p>Article or page content here.</p>
    </div>
</div>

* { box-sizing: border-box; }

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.col-left {
    float: left;
    width: 30%;
    padding: 16px;
    background: #f0f0f8;
}

.col-right {
    float: left;
    width: 70%;
    padding: 16px;
}

Three-Column Layout

.col {
    float: left;
    width: 33.333%;
    padding: 16px;
}

/* Remember: use box-sizing: border-box
   so padding doesn't break the widths */

<div class="row clearfix">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
</div>

Adding Gutters (Gaps)

To add space between columns without breaking the layout:

.col {
    float: left;
    width: 31.333%;  /* Slightly less than 33.333% */
    margin-left: 1%;
    padding: 16px;
}

.col:first-child {
    margin-left: 0;  /* No left margin on the first column */
}

Common Issues

Problem	Cause	Fix
Columns wrap to next line	Total width exceeds 100%	Use box-sizing: border-box; reduce widths
Parent container has 0 height	All children are floated	Apply clearfix to the parent
Uneven column heights	Content varies between columns	Use min-height or switch to Flexbox

When to Use Floats vs Modern Tools

Use Floats For	Use Flexbox/Grid For
Text wrapping around images	Page layouts and columns
Legacy browser support	Equal-height columns
Maintaining old codebases	Responsive designs

Key Takeaways

• Float columns by setting float: left with percentage widths
• Always use box-sizing: border-box to prevent width overflows
• Apply clearfix to the parent row
• For new projects, prefer Flexbox or Grid over float layouts