CSS Float Examples

Examples on different float behaviour with CSS in 'styles-examples.css'.

Basic Boxes

Boxes: float left

Need clearfix on container to hold floats.

Float box1

• box 2 rises up under box 1, disappears; text stays in original spot (?)

Float box1 & box2

• box2 moves right;
• box 3 rises up under box 1, disappears;
• box3 text stays in original spot (?)

Float box1, box2, box3

• box 3 moves right of box2;
• box3 text moves with

Boxes: Float Right

'clear: left' needed on text above to avoid flowing text in-line with previous floated div.

Float box1 right

• box 1 moves to far right;
• box2 and 3 move up.

Float box1, box2 right

• box 2 moves to left of box 1 on far right;
• box3 move up.

Float box1, box2, box3 right

• box 3 moves to left of box 2 on far right;

Float box1, box2 right, box3 beside box2

Add 'clear: right' to text above to avoid float beside previous divs.

• apply 'clear: right' to box 2 - moves under box1 on right
• box 3 stays to left of box 2 on far right;

Float box1, box2, box3 stacked on right

Add 'clear: right' to text to avoid float beside previous divs.

• apply 'clear: right' to box 2 and box 3 - moves under prev box
• box 3 stays to left of box 2 on far right;

Any text that comes after will be placed to left. And it will wrap around the boxes floating on the right. As much text as there is all the way down. Now worries, no challenges, no struggle. Will just continue on flowing.

Even if multiple paragraphs - no problemo!

Float boxes across page

Spread out across page evenly

• boxes spread out based using equal width %;
• can be any combination of widths
• notice how css styles in new class override previous (height, text-align): it's a cascade!