CSS – Understanding How Float Works – Part 2

Contents

1. Floated Elements Flow Sideways
2. Floating Elements Wrap If There Is Not Enough Space
3. Wrapping is Dependent on Which Way the Element Floats
4. Percentage as a Dimension
5. margin:auto Has No Effect on Floats
6. Expanding a Floating Child to Fit Its Parent
7. Summary
8. Playing Around
9. References

Floated Elements Flow Sideways

HTML elements flow from top to bottom in the order in which they appear in the HTML document. This is called normal flow.
Floating elements are outside of normal flow and do not stack top to bottom. Instead, they stack from left-to-right for left floated elements and right-to-left for right floated elements.
Consider the following code:¹

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.left {
  float: left;
}

.right {
  float: right;
}

.centre {
  margin: auto;
}

.yellow {
  background-color: yellow;
}

.lime {
  background-color: lime;
}

.orange {
  background-color: orange;
}

.cyan {
  background-color: cyan;
}

<div class="box yellow left"></div>
<div class="box lime left"></div>
<div class="box orange left"></div>
<div class="box cyan left"></div>

<div class="box yellow right"></div>
<div class="box lime right"></div>
<div class="box orange right"></div>
<div class="box cyan right"></div>

<div class="box yellow centre"></div>
<div class="box lime centre"></div>
<div class="box orange centre"></div>
<div class="box cyan centre"></div>

Which gives the following output:

You will notice that:

1. 3 sets of coloured boxes are declared in the same order (.yellow, .lime, .orange, and .cyan)
2. each set of boxes is given a different alignment class (.left, .right, or .centre)
3. the boxes on the left stack from left-to-right in the same order they were declared
4. the boxes on the right stack from right-to-left in the same order they were declared
5. the boxes in the middle stack from top to bottom in the same order they were declared
6. because the .left boxes and .right boxes are not in normal flow, the .centre stacked boxes occupy their place in the normal flow.

Recall that (relative to their parent):

1. floating elements float up as high as they can. They stop when they either encounter the top margin of their parent or the bottom margin of a non-floating element.
2. floating elements float as far to the side as they can. They stop when they either encounter the side margin of their parent or the side margin of another floating element.

This is exactly what we observe in the example above:

1. the floated elements are declared at the top of the document, so they float up to the margin of the parent – they are not stopped by the bottom margin of other floating elements
2. the floated elements flow as far to the side as they can and are stopped either by the side margin of the parent (the yellow block) or the side margin of another floating element (the other blocks).

Floating Elements Wrap If There Is Not Enough Space

Elements in normal flow stack one atop the other and continue down the bottom of the page as far as needed.
Floated elements do not stack sideways as far as they can go – they are constrained by the width of their parent (assuming you don’t make the child wider than its parent). Any floating elements for which there is not enough room to stack sideways will flow to the next line.
Consider the following 4 left floating blocks (they are scaled to each take up 25% of the available width):

They all line up in a single line as expected.
If we make them a little wider, say 26% of the width of the parent container:

We see that the blue block, because it doesn’t fit, automatically wraps to the next line and moves as far left as it can.
A similar thing happens for right floated elements – except everything moves as far right as it can:

Wrapping is Dependent on Which Way the Element Floats

Sometimes, you can get some unexpected float behaviour if you don’t remember that floating elements:

1. float up as high as they can
2. then float to the side
3. in the order they are declared in the document.

Consider the following:

.parent {
  width: 400px;
  background-color: red;
  margin: auto;
}

.left-box {
  width: 250px;
  height: 100px;
  background-color: yellow;
  float: left;
}

.right-box {
  width: 250px;
  height: 100px;
  background-color: lime;
  float: right;
}

<div class="parent">
  Parent Box
  <div class="right-box">Right Box</div>
  <div class="left-box">Left Box</div>
</div>

The sum of both floats is wider than the parent, so:

1. the floats can’t both fit on the same line (250px + 250px is greater than the 400px of the parent)
2. the floats wrap
3. they wrap in the order they were declared in the document (the right element is placed first, then the left).

Of course, you can have elements float to the left and right on the same line. If we change the width of the floats in the above example to 100px, we get:

Remember that parts of the parent CSS Box is under both the left and right boxes, but the content in the parent box is never under a floating element.

Percentage as a Dimension

Up till now, we have always used pixels as a dimensioning unit. CSS has many ways of dimensioning things. It can be easier to work with float widths as a percentage of the parent container width. When using % as a dimension, it refers to the width of the container as a percentage of the parent width.
Consider the following:

.box {
  margin: auto;
  height: 50px;
}

.w30 {
  width: 30%;
  background-color: yellow;
}

.w50 {
  width: 50%;
  background-color: lime;
}

<div class="box w30"></div>
<div class="box w50"></div>

The yellow box is 30% of the width of its parent.
The green box is 50% of the width of its parent.
If the width of the parent changes, the widths of the child elements will adjust automatically. This can be useful if you want your web content to adapt its size to the browser window width.
It is also useful if you want to quickly divide up the available real estate. Consider the following:

.parent {
  width: 400px;
  height: 200px;
  margin: auto;
}

.main {
  width: 70%;
  height: 100%;
  background-color: lime;
  float: left;
}

.sidebar {
  width: 30%;
  height: 100%;
  background-color: cyan;
  float:left;
}

<div class="parent">
  <div class="main">
    Main content goes here.
  </div>
  <div class="sidebar">
    Sidebar content goes here.
  </div>
</div>

Each floating box gets the specified percentage of the parent’s area. The parent size can be easily changed without having to update the individual sizes of the floating elements.

Expanding a Floating Child to Fit Its Parent

A floating child element will only fill out the parent’s height only if the parent has a definite height specified (e.g. 200px). If no height is specified for the parent or a percentage height is specified for the parent, the floating child will not expand to fill the height of the parent – even if .clearfix is used to expand the parent around the floating children.
Using the same code as above, but

1. setting the parent height to 100%,
2. setting its background-color to yellow, and
3. clearing the floats after the last float (so the parent expands around the floating children):

We see that the parent (yellow) has closed around its children. It has expanded to the height of the sidebar box, but the main content box (despite having its height set to 100%) has not expanded to the bottom of the parent.
If the parent does not have a fixed height, it is not possible to make a floating child expand to the height of its parent without either:

• using JavaScript,² or
• using a different positioning technique.³

The only time this (usually) becomes an issue is when children and parents have different background colours, borders, or other properties that makes it obvious the floating child and parent are not the same height.
Floating children will always respect the width of the parent – as long as you do not make the child wider than the parent.

margin:auto Has No Effect on Floats

Setting margin to auto⁴ on a floating element will have no effect. This is because floating elements automatically float as far as they can to the left or right.
However, you can set a fixed margin on a floating element and it will respect it:

.floating-box {
  width:150px;
  height:50px;
  float: left;
  background-color: cyan;
  margin-left: 50px;
  margin-top: 50px;
}

.parent-box {
  width: 250px;
  height: 150px;
  background-color: yellow;
  margin:auto;
}

<div class="parent-box">
  <div class="floating-box">
    This box is floating with margins.
  </div>
</div>

Summary

1. Floating elements do not stack top to bottom.
2. left floated elements stack from left-to-right.
3. right floated elements stack from right-to-left.
4. Floating elements stack in the order they appear in the document.
5. If there is not enough room on a line to fit a floating element, the element moves down (wraps) to the next line and moves as far to the side as it can.
6. Instead of pixels, dimensions can be given as a percentage. The percentage is relative to the dimensions of the parent.
7. A floating child can be made to fit the full height of its parent by setting its height to 100%. This only works if the parent has a defined height in pixels.
8. margin:auto, which is commonly used to centre HTML elements, is ignored when applied to floating elements.
9. Floating elements respect non-auto margin values.

Playing Around

The best way to learn is to play around with what you have learned.
You have previously seen that you can use the div tag to section content in a document. Prior to seeing the float property, the only possible flow of content was vertical – from top to bottom. With float it is possible to get content to flow side-to-side.
How would you section and style the following page layout using div and float?

1. Make it look good in your browser on your computer. Don’t try to make it look good at all possible screen resolutions.
2. Think about how to section the document. Remember that divs can nest inside other divs.
3. The layout above is a rough template to give you direction on how to layout your document.
4. A general rule of thumb in web design is to make your layout 960px wide (which is then centred in the browser)⁵.

References

1. float
2. clear
3. 960 Grid