Prev Next

CSS Float Examples

Floats can create simple column layouts, image galleries, or callout boxes. By assigning float: left; to multiple elements, they line up next to each other if space allows. Combine with clear to control where the next line starts.

Key Topics

  • Two-Column Layout
  • Image Thumbnails Side-by-Side

Two-Column Example

Assign float: left; and a width to create columns. Use clear: both; after the columns to avoid layout issues.

<style>
.column {
    float: left;
    width: 45%;
    margin: 2.5%;
    background: #f0f0f0;
    padding: 10px;
}
.clear {
    clear: both;
}
</style>

<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="clear"></div>

Explanation: Two floated columns sit side-by-side. The clear element ensures nothing wraps underneath them.

Float multiple images to create a simple gallery. Each image floats left, and their combined widths determine how many fit in a row.

Key Takeaways

  • Simplicity: Floats are quick solutions for basic columns or galleries.
  • Modern Alternatives: For complex layouts, consider Flexbox or Grid.
Prev Next