Floats

Overview

Shared CSS

This section contains CSS that's shared by all experiments on this page.

Basic Floats

Float Left No Frills

The left div is floated left and has a fixed width (with no height, margin, border or padding).

The main div is not floated (with no height, margin, border or padding).

Notice that the left div floats on top of the main div, in the upper-left corner. Furthermore, all child block elements of main are unaffected by the float. They remain in the flow of the main div (i.e., they render under the float). However, all non-block child elements of main are affected and flow around the left div, but within the confines of their parent block elements.

The width of main has expanded to fill outermost, but the height only expands to contain its own content (as evidenced by the white gap under the Main Content).

The use of CSS for the content (e.g., .main::before {content: "Main Content..."}) does not produce selectable text. Text has been added to the main div (e.g., "This is a test"), to validate that normal text is selectable.

float, height, width, margin, padding, border outermost_bf10, left_bf10, main_bf10

Float Left with Padding

The left div is the same as before, but this time it has some padding. The padding for left works as expected.

The main div is the same as before, but now has padding and the extra content has been removed. Notice that the padding has zero impact on the text that flows around left, but does affect the text anywhere it touches outermost. Also, the width of main has shrunk, to account for the padding.

float, width, margin, padding, border outermost_bf20, left_bf20, main_bf20

Float Left with Padding and Margin

The left div is the same as before, but this time a right margin has been added to pad the main text.

The main div is also the same as before, but this time its height has been set to 100%, to fill the outermost container. Notice that the padding, added by a previous experiment, has caused the background to overflow, now that the height is 100%.

float, height, width, margin, padding, border outermost_bf30, left_bf30, main_bf30

Float Left with Overflow Hidden

The left div is the same as before.

The main div is the same as before.

The outermost div now has overflow:hidden.

float, height, width, margin, padding, border outermost_bf40, left_bf40, main_bf40

Float Right with Overflow Hidden

Everything is the same as the previous experiment, except now, the left div has been replaced by a right div (and it has a right margin to push out the main text a bit).

float, height, width, margin, padding, border outermost_bf50, right_bf50, main_bf50

Compound Floats

Float Left and Right

This experiment builds on all of the previous experiments. It combines the float left and float right experiments into one.

The main div must be last, otherwise, the floats will be under main.

Overflow has now been changed to scroll. However, the background of main does not cover 100% of the area.

float, height, width, margin, padding, border outermost_cf10, left_cf10, right_cf10, main_cf10

Float Images

Same as the "Float Left and Right" experiment, except divs have been replaced by images.

float, height, width, margin, padding, border outermost_cf20, left_cf20, right_cf20, main_cf20

Simulated Page Layout

Probably a bogus experiment, but a fun exercise nevertheless.

float, height, width, margin, padding, border outermost_cf40, header_cf40, left_cf40, right_cf40, main_cf40, footer_cf40

Multiple Left Floats

Sans Margin

All child divs are floated left and flow horizontally within the confines of their parent container (but overflow vertically). As with the other experiments, by default, there is no margin, border, padding or height set.

float, height, width, margin, padding, border outermost_mlf10, left_mlf10, left_mlf11, left_mlf12, left_mlf13, left_mlf14

With Margin

Same as above, but now a small margin has been added to the first div. This pushes the second and third divs over, causing the third div to wrap, ending up under the second div (since the bottom margin of the first div gives it something to float to). The fourth div floats to the left edge of the outermost container (as the first div does).

With Margin, Border and Padding

Margin, border and padding are added, plus, the outermost container's size is adjusted to fit the contents using the following formula:

3 * (width + 2 * (margin+border+padding) )

Vertical Centering

Same as the previous experiment, but now uses display: table-cell, so the text can be vertically aligned.