Floating 102

Sop what interesting things can we do with float?

Lets look at a few examples:

Images in Text

When you have a section with text, and you want to have an image in it, you may need to have the text wrap around it so as to not break up the text. By default images will simply break up the text if placed inside, or just sit on top of it if placed before it.

If we want to have the text wrap around the image we need to float it to one side.

CSS

img{
float:left;
}

Here it is in action:



What happens when we have several images to float.

If the are side by side in the html, they'll continue to float left like below:



If would like the to simply drop below eahc other and have the text wrap around them where they end, we simply need to add a clear:float property to out image CSS.

CSS

img{
float:left;
clear:both;
}

It will look like this:




So floats give us nice layout options with images, but what else can it do for us?

Columns

Usually floating is used to create columns in a layout, as you can place divs side by side and fill them with content. Lets say we want a 3 column layout like a newspaper.
Unlike tables, there is no way yet to make floated divs be as high as each other, they'll be as high as the need to be to accommodate their content. As we've seen in previous entries if there's anything floated inside them extra steps need to be taken to make the div correctly wrap around its contents, however in all cases once its wrapped around, it will only be as high as the content requires.

To create the column layout we need to fake the height of the divs, to the observer it will look like they extend down, but in reality the stop where their content ends.

For our 3 column layout here's our basic HTML.

HTML

<div id="wrapper">

<div id="column1">

<h4>Column1</h4>

<p>Content</p>

</div>

<div id="column2">

<h4>Column2</h4>

<p>Content</p>

</div>

<div id="column3">

<h4>Column3</h4>

<p>Content</p>

</div>

</div>

Here's our CSS:

CSS

#wrapper{
width:402px;
background-color:#686868;
color:#DEDEDE;
overflow:hidden;
}

p{
margin:4px;
}

h4{
text-align:center;
}

#column1{
float:left;
width:120px;
}

#column2{
float:left;
background-color:#dedefe;
width:160px;
color:#686868;
}

#column3{
float:left;
width:120px;
}

See it in action:



As you can see the columns appear to match heights, however, if we add a border to the columns on the outside (column 1 and 3) you'll notice they end where their content ends, the rest is an optical illusion caused by the wrapper's background which is gray.

This works for 2 or 3 columns in much the same way, if you need to have more columns then it gets much more complex. We'll talk about multi column layouts in a future article. For now know you can do this for up to 3 columns.

Floating

The ever present, and most often misused property in CSS after of course position.

Floating takes an element, and pushes it to one side of its container or parent element. It takes the element out of the document flow, so it no longer affects its parent's dimensions directly.

What this means is the floated element while still under its parent's general jurisdiction, no longer has any effect on it. If the parent has no height defined then the it will simply collapse, and the floated element will just float above it.

example:

HTML

<div style="width:300px; border: 2px solid red; background-color:#dedede;">

<div style="float:left; background-color:#464688; width:160px; height:200px; color:#dedede;">This Div is floated left</div>

</div>

See that red line? That's the parent div that collapsed when I floated the inner div.
As said before, floated elements do not contribute to their parent's dimensions.

To resolve this you can do 1 of two things that will be cross browser compliant.

Add an overflow property to the style of the parent div, or add an extra clearing element to clear the float from the inner div.

Adding overflow:

HTML

<div style=" overflow:hidden; width:300px; border: 2px solid red; background-color:#dedede;">

<div style="float:left; background-color:#464688; width:160px; height:200px; color:#dedede;">This Div is floated left</div>

</div>

Any type of overflow will accomplish the same result, however :hidden is better if you don't want to have disabled scrollbars, or just a tiny amount of useless scrolling in some browsers.

Adding a Clearing Element

HTML

<div style="width:300px; border: 2px solid red; background-color:#dedede;">

<div style="float:left; background-color:#464688; width:160px; height:200px; color:#dedede;">This Div is floated left</div>

<p style="clear:both;"></p>

</div>

Adding an empty element in this case a paragraph element with a style consisting only of clear:both will clear, or reset the floating, and make the container wrap around the floated elements. It looks the same as the overflow method, but has a small caveat. It may cause an extra space to be present, if you have margin or padding applied to the element that is clearing the float.


This is all fine and dandy when there's only one floated element, what happens when you have 2 or 3 or more floated elements. Here's where CSS gets interesting.

Think of a cardboard box for a moment, and imagine you want to place place X amount of objects side by side on one side of the box. You can keep placing them as long as you have room inside the box. Once you exceed the boxes width, you have to move the object "under" the other objects and start a new row.

The same happens in a div with floated elements. When the total width of the objects inside exceeds the the parent's width they drop down. The direction they drop is based on the direction they are floated. If they are floated left, they drop down and move all the way to the left, if they are floated right they'll move to the right.

HTML

<div style="width:300px; border: 2px solid red; background-color:#dedede;">

<div style="float:left; background-color:red; width:70px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:left; background-color:green; width:90px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:left; background-color:blue; width:60px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:left; background-color:yellow; width:120px; height:200px; color:#dedede;">This Div is floated left</div>

<p style="clear:both;"></p>

</div>



<hr>



<div style="width:300px; border: 2px solid red; background-color:#dedede;">

<div style="float:right; background-color:red; width:70px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:right; background-color:green; width:90px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:right; background-color:blue; width:60px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:right; background-color:yellow; width:120px; height:200px; color:#dedede;">This Div is floated left</div>

<p style="clear:both;"></p>

</div>

The width of the parent doesn't need to be explicitly set, it can be inherited from the parent's parent. Or even as far as the browser window dimensions.

What happens when the dimensions are based on the browser window, is the floated elements will drop down or move back up as the window is resized.

An important thing to keep in mind when working with floats is that an element's dimensions aren't only its width and height. Border, padding and margins also contribute to its dimensions.

If you have a parent element with a width of 600px but it has 3 floated elements inside with a width of 200px each then they should float on the same line right?

As long as they have 0 border, margin and padding they will sit side by side. When you start adding padding and border things change a bit.

If you have a container that is 600px wide, and 3 floated elements inside each 200px but each has 2px padding and maybe 2px of border, plus say 4px of margin, then one of them will drop down.

100px width + 2px (padding left), + 2px (padding right) + 2px (border left) + 2px (border right) + 4px (margin left) + 4px (margin right) = 116px total * 3 elements is then 648px in a 600px wide element.

Its all in the math.

Next time will look at how to achieve some more interesting layouts using floated elements.