CSS Floats & Positioning

Colin Gourlay & Kevin Vanderbeken

Today:

Floating Elements

Clearing Floated Elements

introduction

different boxes

block elements

<div>, <p>, etc.

I’m text inside a block element

So am I.

I’m in a block element too!

inline elements

<span>, <a>, etc.

I’m text inside an inline element So am I.

an inline element too!

I’m in

block and inline elements support the box model in

different ways

• The Width property wont do anything on inlines since they are defined by their content and run inline with other content.

• Margins are only possible on the left and right, not top and bottom.

• ...and other things left to your experimentation :-) 

In the CSS layout model, text elements are laid out from top to bottom in the

order in which they appear in the source, and from left to right.

When the window or containing element is resized, block elements

expand or contract to the new width.

block element

block element

block element

block element

block element

block element

When the window or containing element is resized, inline elements

reflow to fit. 

inline element inline element inline element

inline element inline

inline elementelement

elements don’t overlap or bunch up, they make room

for one another

floated elementsa.k.a

‘floats’

floats can be used to create:

multi-column layouts

navigation toolbars

table-like alignment(without tables)

and much, much moreTM

float: left;float: right;float: none;

things you should know about floated elements

a floated element is like an island in a stream

I’m a block element that is beside an image that has been floated to theright. My contents will wrap around the image.

floats stay in the content area of the containing element

this isn’t possible

margins are maintained

I’m a block element that is beside an image that has been floated to theright. My contents will wrap around the image.

img { float: right; margin-left: 5px; margin-right: 5px; }

always provide a width for floated elements

I’m a block element that is beside an paragraph that has been floated to the right. My contents will wrap around the paragraph.

p.floatRight { float: right; margin: 5px; width: 120px; }

I’m a paragraph element, floated to the right, with a defined width

floated inline elements behave as block elements

elements do not float higher than their reference in the

source

you can float multiple elements

Because I am beside two floated

elements (one left, one right), I wrap around both of them.

there is one noticeable side effect of using floats...

what we actually want to see is this...

to achieve this effect, we need to make use of

clearing

clearing floated elements

clear: left;clear: right;clear: both;

clear: left;The left value starts the

element below any elements that have been

floated to the left

clear: right;Similarly, the right value

makes the element clear all floats on the right edge of

the containing block

clear: both; If there are multiple floated

elements, and you want to be sure an element starts below

all of them, use the both value to clear floats on both

sides

My position is governed by the floated elements to the left. I have not been cleared in any way.

I have been cleared, so I start below the floated elements.

next week...

CSS Positioning

&

CSS Grid Systems