Columns By Floating

This example explores floating blocks to create columns.

Important: Recall the W3Schools CSS Box Model Page which explains default block behavior.
The width and height of a block sets the size of only the content area - just the "inside" of the block.
The effective size of the block, the actual space it takes up in the page, will be larger if the block has padding, border, or margins, all of which add more effective size to the block.

The columns below add up as you would expect since they have no padding/border/margin: 25%+25%+25%+25% = 100%.
But they clearly could benefit from some space between.
Space between columns is often called column gutters or simply gutters.

25% width + no padding/border/margin
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

The columns below DO NOT add up as you would expect since they have left/right padding, making the effective widths add up to more than 100%.
If the columns add up to more than 100%, they will wrap around like below. There is not enough space to float them all side-by-side.
Since each column has 20px of combined left/right padding, the effective widths of the columns is 100% + 80px.

25% width + 20px left/right padding
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

The easiest solution to the above problem is to change the way block width/height is calculated using the box-sizing CSS property.
Standard block sizing as described above has been a headache for Web developers for many years. However, the W3C can't change how blocks are sized by default or else millions of Web pages would suddenly change. The solution came in about 2011 (give or take) when browsers started supporting the new CSS box-sizing property. You can use this property to cause padding and border to be included in a block's width. Then it's easy to get column that have padding, or even borders, to add up to 100% properly.

25% width (including padding/border)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

Even with the box-sizing CSS property, margins are still NOT included in the width/height of a block.
So you can't simply add margins to the column blocks in the above example to create visible gutters like below. Margins on the column blocks would still cause the effective widths of the column blocks to add up to more than 100%.

Instead, the columns with gutters below are created using nested blocks. The parent blocks that create the 4-column structure have no padding, border or margins, so it's very easy to get them to add up to 100% width.
The child blocks are then free to have margins, borders, and padding without affecting the 100% width column layout created by the parent blocks.

Two different classes of child blocks are used to create different looks for the column content below. The gutters are created by the margins of the child blocks.
Using parent blocks to create the column structure, and then child blocks to format that actual column content is the most versatile way to create columns using floated blocks.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.