Floating Columns

Floating Columns

Before Flexbox and Grid existed, floats were the primary way to create column layouts. While modern projects use Flexbox/Grid, understanding float-based columns is valuable for legacy code and deepens your understanding of CSS layout.

Two-Column Layout

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

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

.col-half {
    float: left;
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
}

/* Result:
┌───────────────┬───────────────┐
│   Column 1    │   Column 2    │
│   (50%)       │   (50%)       │
└───────────────┴───────────────┘ */

Three-Column Layout

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

.col-third {
    float: left;
    width: 33.333%;
    padding: 20px;
    box-sizing: border-box;
}

Sidebar + Main Content

<div class="layout clearfix">
    <aside class="sidebar">Sidebar</aside>
    <main class="main-content">Main Content</main>
</div>

.sidebar {
    float: left;
    width: 250px;
    background: #2c3e50;
    color: white;
    padding: 20px;
    min-height: 400px;
}

.main-content {
    margin-left: 270px;  /* sidebar width + gap */
    padding: 20px;
}

/* Result:
┌──────────┬──────────────────────────┐
│ Sidebar  │    Main Content          │
│ (250px)  │    (remaining space)     │
│          │                          │
│          │                          │
└──────────┴──────────────────────────┘ */

Adding Gutters (Gaps)

/* With padding-based gutters */
.col-half {
    float: left;
    width: 50%;
    padding: 0 15px;     /* 15px gutter on each side */
    box-sizing: border-box;
}

.row {
    margin: 0 -15px;     /* Negative margin offsets edge padding */
}

Responsive Float Columns

.col {
    float: left;
    width: 33.333%;
    padding: 15px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .col {
        width: 50%;    /* Two columns on tablet */
    }
}

@media (max-width: 480px) {
    .col {
        width: 100%;   /* Single column on mobile */
        float: none;   /* Remove float */
    }
}

The Equal Height Problem

Float columns have independent heights. If one column has more content, it'll be taller than the others:

┌──────────┬────────┐
│ Column 1 │Column 2│
│ lots of  │ short  │
│ content  └────────┘
│ here     
└──────────┘  ← Unequal heights!

This was historically difficult to fix with floats. Flexbox solves this with align-items: stretch (the default).

Floats vs Modern Layout

Feature	Floats	Flexbox/Grid
Column layouts	Requires clearfix, percentages	Simple and intuitive
Equal heights	Very difficult	Automatic
Vertical centering	Nearly impossible	One property
Reordering	Must change HTML	order property
Responsive	Requires many media queries	Often built-in

Key Takeaways

• Float columns use float: left + percentage widths to create layouts
• Always use box-sizing: border-box so padding doesn't break column widths
• Use clearfix on the row to contain floated children
• Float columns can't easily have equal heights — Flexbox fixes this
• Use media queries to stack columns on smaller screens
• Modern Flexbox and Grid are better for layouts — floats are now mainly for text wrapping