The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works.
Also, in the past, it’s been linked to some pretty nasty browser bugs so it’s normal to get nervous about using the float property in your CSS rule sets. Let’s calm those nerves and ease that frustration. I’ll show you exactly what the float property does to your elements and how incredibly useful it can be once you master it.
We see floats in the print world every time we pick up a magazine article with an image on the left or right with text flowing nicely around it. In the world of HTML/CSS, text will wrap around an image with the float property applied to it, much like in a magazine layout. Images are just one of the many use cases for the float property: we can also achieve the popular two-column layout using floats. In fact, you can float just about any element in your HTML. By learning and understanding float property basics, along with position property basics, you will be able to achieve any layout with confidence.
The definition#section2
Let’s start with the definition of a float. According to the W3C:
A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the “clear” property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.
The float property has four values that we can apply to it: left, right, inherit, and none. Each value is pretty self explanatory. For example, if you assign float: left to an element, it will move to the left-most boundary of its parent element. The same idea applies if you were to assign float: right; to an element. That element would be sent off to the right-most boundary of its parent element. The inherit value tells an element to inherit the float value of its parent element. The value none is the default value and tells an element not to float at all.
Here is a simple example like the magazine reference above, Example A and the corresponding markup:
img {
float: right;
margin: 10px;
}How floats behave#section3
Nothing too complex, but still pretty cool right? Child’s play you say. Ok, well before we get into the part where floats usher in a world of bacon-loving unicorns, let’s back up for a second to talk about what’s actually happening here. In the web world, our HTML is bound by some rules, in particular, the normal flow. In the normal flow, each block element (div, p, h1, etc.) stacks on top of each other vertically, from the top of the viewport down. Floated elements are first laid out according to the normal flow, then taken out of the normal flow and sent as far to the right or left (depending on which value is applied) of the parent element. In other words, they go from stacking on top of each other to sitting next to each other, given that there is enough room in the parent element for each floated element to sit. This behavior is crucial to remember as you build your websites.
Let’s look at a few more examples. In Example B, there are three blocks without the float property applied:
.block {
width: 200px;
height: 200px;
}Notice how they stack on top of each other? This is the basic concept of normal flow. Here is the same example again, but this time the blocks are all floated in Example C:
.block {
float: left;
width: 200px;
height: 200px;
}Now the blocks are sitting side by side. Great, we’ve got that figured out. But what about that part where I said “given there is enough room in the parent element for each floated element to sit?” I thought you’d never ask. Let’s take our last example and increase the box count five fold. The parent element in this example is the body of our document. Notice that depending on the size of your browser window (and subsequently the parent element body), the blocks drop to a second row, because there is not enough room for all of them to sit side by side. As you resize your browser window to allow more room, you’ll see the blocks rearrange themselves. Try it for yourself, in Example D.
In the clear#section4
The float property has a step-brother, clear. The two complement each other in a way that should make you a happy coder. As you may recall, a floated element is first laid out according to the normal flow, then removed from the normal flow. This means that every element that follows a floated element will behave contrary to what you expect. This is where I suspect we might start to get into trouble. Let’s look at a quick example with our blocks again. In Example E, I am going to float two blocks (pink and blue) and directly after those, not float two more blocks (green and orange). Here is the HTML and CSS for Example E:
<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green"></div>
<div class="block orange"></div>.block {
width: 200px;
height: 200px;
}
.float { float: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }How do you like that green block? Oh wait, where is it? It’s there, right underneath the pink block. The pink and blue blocks are both floated and behaving as we would expect, sitting side by side. Since they’re removed from the normal flow however, the green and orange blocks act as if they’re not even there. That is why our green block is hidden undereath our pink block. So how do we make our green block show up again? Enter the clear property.
The clear property has five values available: left, right, both, inherit, and none. Assigning a value of left says the top edge of this element must sit below any element that has the float: left property applied to it. The same concept applies for the right value—the element must sit beneath any element that has the float: right property applied to it. Using the both value tells our element that its top edge must sit below any element floated either left or right. The inherit value takes on the clear property from its parent element, while the default value none behaves as you would expect. Arming ourselves with this knowledge, let’s look at Example E2. This time we’ll clear our two floats by applying the clear property to our green block. Our slightly modified code looks like this:
<div class="block pink float"></div>
<div class="block blue float"></div>
<div class="block green clear"></div>
<div class="block orange"></div>.block {
width: 200px;
height: 200px;
}
.float { float: left; }
.clear { clear: left; }
.pink { background: #ee3e64; }
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #E2A741; }By assigning a clear: left property value to our green block, we’ve told it to act as if the pink block is in the normal flow of our document, even though it has been removed, and to sit below it. This is an immensely powerful property; as you can see, it helps bring our non-floated elements back into the normal flow, a behavior that we tend to expect by default. That said, knowing and understanding both the float and clear property really starts to open some creative doors when you write your HTML and CSS.
Using floats for layouts#section5
Let’s cover layouts. This is where the float property is incredibly useful. We can achieve the traditional two-column layout in a variety of ways; most of them use one or two floated elements. Let’s take a look at a simple example: a two-column website with the content area on the left, navigation on the right, and a header and footer area to cap it off. For the sake of this article, we’re only going to look at the code related to the floated elements. Here’s Example F:
#container {
width: 960px;
margin: 0 auto;
}
#content {
float: left;
width: 660px;
background: #fff;
}
#navigation {
float: right;
width: 300px;
background: #eee;
}
#footer {
clear: both;
background: #aaa;
padding: 10px;
}Ok, let’s talk about what’s going on here. Our containing parent is aptly called #container. This holds our floated elements in place. If we didn’t have it, our floated elements would shoot out to the far left and right of the viewport (our browser window). Next, we have #content and then #navigation. These are our floated elements. We sent #content to the left, and #navigation to the right, to achieve our two-column layout. I’ve defined a width for each, so that they fill our entire parent container. Finally, we have the #footer, on which we’ve set the clear property. As we know from before, this clear property brings the elements following any floated elements back into the normal flow. In this case the #footer has the value both assigned to it, causing our #footer to sit below both the #content and #navigation elements.
What would have happened had we forgotten to assign the clear property to our footer? Take a look in Example G.
Our #footer has slid up underneath the #navigation. This is happening because there is room underneath the #navigation for the #footer to fill, and given the normal flow that we work within, this is actually the correct behavior. But it’s definitely not what we’re looking for, is it? You can start to see the interaction between the float and clear property and how they complement each other so well.
If you have obsessive compulsive disorder, like I do, you may notice that back in Example F there are unequal heights on #content and #navigation; there are several ways to address that, but that’s out of this article’s scope. I highly suggest reading Faux Columns by Dan Cederholm to learn how to make the heights appear to be the same, no matter what the content.
Float first#section6
So far we’ve seen some pretty straightforward examples that don’t create many headaches. There are, however, some gotchas that we have to watch for when working with the float property. Surprisingly one of the biggest gotchas is not with the CSS but rather with the HTML itself. Where you place your floated element in your HTML can cause different results. Take a look at Example H.
Here we have a nice small-ish box that has an image floated on the right and some text surrounding it. Our CSS is basic:
#container {
width: 280px;
margin: 0 auto;
padding: 10px;
background: #aaa;
border: 1px solid #999;
}
img {
float: right;
}Our parent element, #container has a narrow width keeping our floated element, the img, within its bounds. Our HTML looks like so:
<div id="container">
<img src="image.gif" />
<p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>
</div>This basic concept gives us the desired result, but what if we took this same example and rearranged the HTML just slightly? In Example I we’ll move the img to come after our paragraph of text:
<div id="container">
<p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>
<img src="image.gif" />
</div>Our results are less than desirable. Our image is floated to the right, but it’s no longer in the top corner where we wanted it, falling instead underneath our paragraph; worse yet, it seems to be sticking out of the bottom of our #container parent element. What is going on? First, a rule that I have found that works nicely for my layouts is float first. That is, in my HTML, I almost always place my floated elements first in the markup, and before any non-floated elements that my float will interact with, such as the paragraph in the example above. Most of the time, this gives the desired result. Second, the reason that the image is seemingly sticking out of the bottom of our #container element has to do with something called collapsing. Let’s talk about what collapsing is and how we can best address it.
Collapsing#section7
Collapsing is when a parent element that contains any number of floated elements doesn’t expand to completely surround those elements in the way it would if the elements were not floated. In Example I above, our parent element, #container, collapsed as if the floated img element wasn’t even there. This is not a browser bug, but rather an expected and proper behavior. Since floated elements are originally calculated in the normal flow and then removed, the #container element doesn’t consider it within its bounds and therefore acts as if it isn’t even there. As a note, Eric Meyer has a wonderful article on this topic called Containing Floats that goes into much more depth and is a highly useful resource. The good news is, we can remedy this problem in a myriad of ways; if you’re guessing that it has to do with the clear property then you’re on the right track.
One of the most common ways to fix a collapsed parent element is to place an element with the clear property after our floated element. This will cause the parent to begin reflowing after the floated element. It may be easier to show this in action. Look at the HTML for Example J which is the same as our previous example, but with one extra element added:
<div id="container">
<p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p>
<img src="image.gif" />
<div style="clear: right;"></div>
</div>By placing a div with an inline style of clear: right we’ve managed to get our #container to clear our floated image by having it recalculate its height now that there’s an element sitting below it. While this solution works, it may not be the most elegant because we had to add extra markup to our document. It would have been sexier to handle this with CSS. There are a few ways to do that, so let’s take a look at one of them right now.
Consider this example, a parent element containing three floated images. Our HTML looks like this:
<div id="container">
<img src="image.gif" />
<img src="image.gif" />
<img src="image.gif" />
</div>and our CSS looks like this:
#container {
width: 260px;
margin: 0 auto;
padding: 10px 0 10px 10px;
background: #aaa;
border: 1px solid #999;
}
img {
float: left;
margin: 0 5px 0 0;
}When you look at this in action, you’ll quickly realize that our parent element is not containing our floated images. Again, this is expected because floated elements are removed from the flow, so according to our parent element, #container, it’s empty. Take a look at this in Example K.
Now let’s try to remedy this with CSS instead of adding extra HTML markup to our document as we did before. There is a method that allows a parent element to clear itself of any floated elements inside it. It uses a CSS property called overflow with a value of hidden. Note that the overflow property was not intended for this type of use, and could cause some issues such as hiding content or causing unwanted scrollbars to appear. You can read more about how it came to be and some of its caveats here and here. For our example however, we’ll apply the overflow: hidden property to our parent element, #container:
#container {
overflow: hidden;
width: 260px;
margin: 0 auto;
padding: 10px 0 10px 10px;
background: #aaa;
border: 1px solid #999;
}Our results are in Example L. Pretty cool right? Another method which gives similar results with fewer caveats uses the pseudo selector :after. Using our example, the code is:
#container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}Here, the CSS is placing a new element after our #container element that has some content in it (in this case, a period), and setting it to be hidden with no height. You can find a very thorough and detailed overview of this technique at Position is Everything.
Finally, Eric Meyer explains a third way to tackle this problem in his article referenced above, Containing Floats. According to the CSS Spec 2.1:
a floated element will expand to contain any floated elements that descend from it.
So in this case, floating our container element would cause it to contain our image and paragraph the same way as the methods described above.
Ultimately all of these solutions are doing the same thing. They are making the parent elements respect the flow of their floated children. Each one has its merits and usefulness. You should learn about each and then apply the ones that work best for your given situation.
Things that may cause rapid hair loss#section8
Believe it or not there are a few browser bugs that floated elements can bring on, such as the double margin bug and the 3px Text-Jog. Both of these are outside this article’s scope, but rest assured they are both easily remedied if you want to support older browsers.
Conclusion#section9
Using the float property can pad your layout technique toolbox in some very cool and responsive ways. Understanding how they work and the principles by which they behave will give you a solid foundation for using floats effectively.
…why does ala structure pages so that if you click on an example you get sent to a new page instead of seeing the example alongside the code? This is a prime example of bad interface design! They should use javascript pop-ups or css hide/shows! Religious prejudice against javascript I imagine. OMG.
There is a small, often made mistake in this article:
“Here, the CSS is placing a new element after our #container element… ”
is not correct. The new (pseudo)element is not placed after #container, but inside of #container (after it’s current *content*).
According to the “specs”:http://www.w3.org/TR/CSS2/selector.html#before-and-after :
“The ‘:before’ and ‘:after’ pseudo-elements can be used to insert generated content before or after an element’s content.”
I really like the solution I’ve learned from Dan Cederholm’s book, Handcrafted CSS, where he defines a class .group that you can attach to any element with floating children.
.group:after
{
clear:both;
content:”.”;
display:block;
height:0;
line-height:0;
visibility:hidden;
}
There are also very simple fixes for IE6 and IE7.
For the last year this is the only thing I’ve been using to manage floats and it’s working really well. I would imagine it saves time/space by not repeating the code in the CSS file for every element, but rather applying the class in the HTML.
Thank you – very clearly presented and with easy-to-understand examples.
@nico – You are correct, I will rework my wording so as not to confuse.
@pavelmocan – That is a handy solution indeed!
@kgoeller – Glad you enjoyed it!
Just popped into alistapart.com after a long absence – via Jon Raasch’s site … I wanted to say a BIG thank you to Noah (& all other generous spirited souls like him who take the time to give us such great articles) – your article has just provided me with a timely reminder on the nitty gritty surrounding floats. It’s easy to forget basics when embroiled with so many of the other aspects of creating a website.
I’m looking forward to reading more articles this good at explaining. As long-standing as Floats have been – I still can use tutoring in the fundamentals.
We never need extra content in the dom to clear floats. (To say nothing of the evils of inline styles.)
You may want to try the following methods instead:
1. Apply the clear to the next natural element in your dom (it’s amazing how often people forget to try this first).
2. If that is unwieldy, “overflow: hidden;” works to clear most floats, and involves less css.*
3. :before or :after generated content as discussed before is a reasonable third option.*
* Solutions #2 and #3 will not work in older versions of IE. Applying an IE-specific property that sets “hasLayout” will clear the float.
Many people use “zoom: 1;”.
Google “hasLayout” for detail.
@Ron/@Juliet – Thanks, glad you both enjoyed the article.
@scottlepich – All good points, but for the purposes of teaching, I stick my my examples to show behavior in easy to understand ways.
I recently make a site that uses insane amounts of floats. At first I thought that they were cross browser nightmares but after more experimentation I found that they really work perfectly as long as you follow the rules.
This article would have saved me so much pain. Keep up the great work!
Is there any potential harm in using clear: both; when there’s only one floated element above?
If I have one element floating left or right, I assume clear: both; would do the same thing as clear: left; or clear: right; — Which leads me on to asking whether we should bother using clear: left/right; at all, and just stick with clear: both;.
@Oliver – While there is no harm in using clear: both; to clear only one float, I still prefer to get specific and clear the left or right.
Really valuable article and well explained scenarios..
Going back to basics in things like css floats is really important to know the exact techniques that saves a lot of our time while writing styles..
Thanks for such a nice effort…
Alas, I’m bummed that ALA has published an article advocating adjusting your source order to fit the design (‘float first’).
Not that I’ve never resorted to it but, you know, this is ALA.
Floats are great if you’re gonna let text wrap around an image (or a small text box etc.). To put boxes side by side (multi-column layout) floats may not be the best choise since they cause some trouble (height problem, clearing).
You can avoid these problems if you style those boxes as what they really are: inline boxes. Just by setting the display property:
.block { display: inline-block }
See my article “inline-block — an alternative to float”:http://bittersmann.de/articles/inline-block/ (in German language, but you should get the picture). The only drawback of this solution might be the whitespace between the element tags in the HTML source code.
***
In the explanation to example F you wrote: _”Our containing parent is aptly called #container. [“¦] If we didn’t have it, our floated elements would shoot out to the far left and right of the viewport (our browser window).”_
No, the container element is not necessary since there are two containers already: the ‘body’ and ‘html’ elements. Just set
body {
width: 960px;
margin: 0 auto;
}
and apply all styles for the whole viewport (background etc.) to the ‘html’ element.
BTW, a fixed width of 960px causes horizontal scrolling in narrower viewports which is not user-frinedly. Better use ‘max-width’.
***
::before and ::after pseudo-elements need content to get displayed. I prefer not to use ‘.’ (to which you need to apply some other styles to hide it). Use a no-break space (code point U+00A0) instead:
content: “A0”;
Nic job, man. This is as simple and as good as Positioning 101. Hope you don’t mind if I make another translation to polish? 🙂
Thanks so much for a great article …sometimes I make this harder than it needs to be so it is nice to see it all in plain english.
One question though … in example G why is the uncleared footer below the nav and not under both floated elements (as the green box was below the pink one in the early example)? By virtue of being floated aren’t they out of the document flow? I know there must be something simple I am overlooking.
As pointed out by scottlepich, the use of the CSS overflow property in the containing element is far superior to resorting to a inelegant solution such as a clearing div (which itself can cause many layout problems and code bloat). I am surprised that in 2011 we’re still encouraging people to use clearing divs, which even in 2001 felt clunky.
Use overflow:hidden with a set width or height would be far more preferable to me. Please consider it.
My apologies, I missed it the first time, you DO encourage use of overflow:hidden. Excellent!
Noah, you’ve done a great job in explaining floats. There’s only one miss about the :after pseudo-element but someone’s already commented on that.
I’m sure a lot of people starting out now are going to find this very helpful. I just wish you’d written this when I started out 🙂
Great Post, but i can’t find an answer for my problem, i always have using float:right;
Illustration here: http://yfrog.com/h76pxekj
are my searchings for a solution vain, or not?
The clearfix described uses a solution that does not work under all conditions. “This is discussed in an issue on HTML5 Boilerplate”:https://github.com/paulirish/html5-boilerplate/issues/340
Another great article, this is one of my favorite blogs!
@willthemoor – Thanks for your comment. I might be missing it, but what is the problem with arranging your HTML in a certain way that can help when using floats?
@Gunnar Bittersmann – Thanks for your thoughts. I don’t think it’s realistic to avoid floats, nor do I think it’s necessary. With a proper understanding they can be used effectively—as they were designed.
@nd_macias – Thank you, would love a translation!
@extravaganzasd – The footer had no defined width as the boxes did in the earlier example. It defaulted to auto which was the given space beneath the navigation.
@Farid Hadi – Thank you, and will get that corrected!
@viktord – Without knowing the HTML, I would suggest wrapping the paragraph of text and the image in a div, and setting overflow hidden on that div.
@Divya Manian – Thank you for the link, I will be sure to read up on that.
@ricksuggs – Thanks!
I’m looking forward to reading more articles this good at explaining. As long-standing as Floats have been — I still can use tutoring in the fundamentals.
That was a very nice piece on css float. I was always wondering what clear, overflow, visibility and hidden were for. Nicely done !
hi, i was scratching my hairs with div and css and you have made my world easy thnx again
Hi Noah,
As Divya said already, the clearfix technique you mentioned is pretty old. “clearfix reloaded”:http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ is the one HTML5 Boilerplate uses.
As a side note, I think this technique should always come with a warning, because it may introduce more bugs than it solves. People often end up with more problems, not because of the floats they use, but because of their choice of clearing them (via ‘clearfix’). See “Everything you Know about Clearfix is Wrong”:http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/
Also, you could have mentioned that ‘floats’ create block formatting contexts and trigger hasLayout, hence they will contain floats themselves (across browsers).
@noah Thanks for asking.
Let’s say you have a article with an
and
along with a related
Again, I’ve resorted to it many times but always hate myself a little when I do. Seems to be worth mentioning the drawbacks (particularly since ALA has a history of pointing them out). Hope this comment isn’t annoying! This is a great float overview.
references:
SEO : http://ifdebug.com/articles/changing-html-source-order-damage-search-engine-referrals/
http://www.google.com/search?q=source+order+site:alistapart.com (+ not working?)
Another fan of Dan Cederholm’s .group method. It’s one of those things in my little starting framework that will take a while before removing them and replace them with something different.
Excellent article though 🙂
i’m not a css guru, but doesn’t ‘overflow: hidden’ simply hide anything sticking out of the containing box?
i’ve found that using ‘overflow: auto’ usually fixes the problem for me, i think it forces the containing box to
expand around the floated elements instead of adding extra
markup just to clear the floated elements.
does that not work? i’m not sure, maybe it only works if the containing box has position: relative, and not when the containing box has the default position: static.
Floats have always seemed to be the one thing that causes me occasional grief. I could never understand why some tags worked in some cases, why ‘hacks’ were needed, and how to build simple CSS that works in all browsers. This article does an excellent job of working from the ground up with floats. The pacing of the article is spot on.
I completely agree with @willthemoor. I’m feeling the same trouble when putting less important information higher up in the html source, just to be able to float it.
Anyone knowing a good solution for this?
@willthemoor – A very valid point, and something to consider when optimizing a site for search engines and/or screen readers.
@lode – A solution for something like this would be to float both the text and the figure, more code and thought required, but totally doable.
Check out this method which is much better (for the sake of people reading this, and still applying the old methods mentioned)
http://www.quirksmode.org/css/clearing.html
Nice and very useful article. I think what some people are never taught is the clear property, and how to use it. This then causes them to use excessive amounts of floating in their layout, when it shouldn’t really be needed!
Hi, your article is a great resource, thank you for sharing. I just wondered if I can translate it into another language and put it on my site http://www.thoughtresults.com (coming soon)?
Thanks
I found you article very good and in depth. But in the real world I would agree with scottlepich. Overflow:hidden is my personal favourite to clear the floats by using the height of the containing div to push elements later in the DOM structure below the floats. This also helps with background colours/images such as faux columns.
is that we still need the clearfix classes. In a ideal world, classes like the clearfix class would apply automatic. The markup also looks kind of silly because we need to use it. Divider class equals clearfix? That kind of semantic logic should be illegal IMHO. 🙂
There is another way to clear the float. If the container of floated elements have display:table, the floated keeps within the container, giving it a proper height and width.
I tend to agree with Gunnar Bittersmann in preferring the display: inline-block method for both columnar layouts and side-by-side situations. No clearing needed, no need to worry about no height problems. I use floats only when I need text-wrapping — that’s what I think floats were designed for, and where they work best. Can you use them for columns? Sure — and I used to rely on them exclusively. But these days I think that using display: inline-block is a better technique. But thanks for the article.
Very interesting and informative blog, it will definitely help me out in future site building.
It’s great to see the examples too, to back up what you are trying to explain, as it’s not always easy to see what would happen in each case.
Although I have used clear:both and overflow:hidden before, I have not always understood the reason behind why and how it works. This has cleared things up for me, and I will now be able to use them with more confidence in the outcome.
Thanks so much – like others in this string I’ve been working with floats for years but was still murky on the finer points of clear, overflow, etc. Thanks for taking the time to walk us through them all and the examples are great.
I’ve found a very common “trick” that usually solves floating issues in older IE browsers. By setting any floats to display:inline, it can often kick any misbehaving floaters into place – this usually comes hand in hand with overflow:hidden on the parent container.
Another thing to consider is that it is always best to assign widths to your floated elements.
Great article! Cheers.
Thank you for an informative and thorough article. I am busy creating my own little mental models to help me understand CSS/html. Knowing there is a” natural flow” is illuminating! A little bit like life,really!
alistapart is a wondrous resource…
Well written and easy to follow – thanks.
Wish I’d read something like this back when I was first learning about the float property!
Its been a while since I’ve visited ALA, but I have to say that I’m pretty shocked that in 2011 there’s an article on clearing floats. These techniques are ALL more than 5 years old, and I know re-posting good techniques is very beneficial to newer devs who might not have been in the game as long as some of us, but this just feels bizarre.
I kept looking at the article date to verify that I hadn’t stumbled across some earlier article. Float clearing with a mention of known IE6 bugs?? Links to images that don’t pop in a lightbox, forcing me to click ‘Back’? Did I accidentally hop into my time traveling Delorian without knowing it?
While the information could be considered old news now, a good explanation is always welcome.
Here’s a question though. Using example E2, if you increase the height of just the Blue box, how do you get the Green and Orange boxes to float up back under the Red box? Essentially you want the normal flow for 3 of the 4
overflow:hidden and auto seem to do the job. However, I’d like to mention that using tables eliminates any of the clearing problems. Although it requires much more mark-up (which this is the reason for not using
For example, this is Example_I, using tables instead of
Paragraph
and the table contains the image instead of it floating our with
Hi, I have read your article or tutorials… Its really awesome… I personally thanks for your all post…. Dhananjay Kumar, India
Hi, always try to use div based layouts instead of tables ‘coz tables take lots of time at the time of loading or rendering the page.
And slow down your website as a result. See here How to Optimize CSS
Hope it helps 🙂
I have found this article and the Positioning 101 article (http://www.alistapart.com/articles/css-positioning-101) very useful. But they seem to be different ways of achieving the same thing? So which is best for a multi-column layout? or have I missed the point of one of them. Floats seems to get the job done with less hassle…
I’ve always been afraid of using floats because of how seemingly ‘unpredictable’ they can be but this article makes it all seem so simple! Thanks so much for writing this!
I agree with extravaganzasd, neither do I understand how the uncleared footer don’t end up underneath the floated elements.
I have tried to give the footer a width but it still ends up underneath the floated element.
Could you explain this more in detail?
Great article!
I agree with extravaganzasd, neither do I understand how the uncleared footer don’t end up underneath the floated elements.
I have tried to give the footer a width but it still ends up under the floated element.
Could you explain this more in detail?
Great article!
Edit: clarifying
I have to return to question earlier put by “extravaganzasd” (page 2 post 17) and “IbanezPlayer” (page 6 post 54) because I find the answer by Noah Stoke in post 24 (page 3) not being correct, but in the same time actually right. And I think I can show it in an easy way too.
Before doing so, let me fist say I really appreciate this article. In many ways. For one, it’s, IMO, a perfect example of what a well written tutorial/article should look like in use of language and pedagogic tools (of which humour is one and facts is another — and a third is to know how to make balance of the two former, which the author IMO really knows). Great job Noah!
I also have to state that I’m quite new in the game of web design (and all other data related subjects as well).
Regarding example G:
According to the rule stated in the article (beneath the header “How floats behave“): “Floated elements are first laid out according to the normal flow, then taken out of the normal flow and sent as far to the right or left (depending on which value is applied) of the parent element.“ you would expect the #footer to sit just beneath the #header.
And, as far as I can see, that is actually where it sits. If you put a border around the #footer you’ll see for yourself (the borders just appears at the wright side and the bottom of the #footer, and that because the rest of the #footer is hidden under the #content and the #navigation).
This will be even more obvious if the #content and the #navigation is moved down (for example with margin-top: 20px): Now you’ll see all sides of the #footer and its border and how it sits — just like the rule said it should – beneath the #header (the #content and the #navigation was taken out of the normal flow, etc.).
The thing that still bothers me is that the TEXT NODE “Footer” puts it self just beneath the #navigation (and in the bottom wright corner of the #footer).
When looking at the HTML DOM Node Tree the text node “Footer“ in the article example is a child of the #footer and I would expect it to be at the left top of the #footer, but because it doesn’t I’ve obviously missed something.
This behavior doesn’t change if you put the text node “Footer“ in a paragraph (and it was this behavior that fist cheated me to believe that ALL of the #footer did the same, was put under the #navigation — and to the wright of #content).
If anybody could explain the behavior of the text node in this example I would be happy.
I have to return to question earlier put by “extravaganzasd” (page 2 post 17) and “IbanezPlayer” (page 6 post 54) because I find the answer by Noah Stoke in post 24 (page 3) not being correct, but in the same time actually right.
And I think I can show it in an easy way too.
Before doing so, let me fist say I really appreciate this article. In many ways. For one, it’s, IMO, a perfect example of what a well written tutorial/article should look like in use of language and pedagogic tools (of which humour is one and facts is another — and a third is to know how to make balance of the two former, which the author IMO really knows).
Great job Noah!
I also have to state that I’m quite new in the game of web design (and all other data related subjects as well).
Regarding example G:
According to the rule stated in the article (beneath the header “How floats behave”): Floated elements are first laid out according to the normal flow, then taken out of the normal flow and sent as far to the right or left (depending on which value is applied) of the parent element.” you would expect the #footer to sit just beneath the #header.
And, as far as I can see, that is actually where it sits. If you put a border around the #footer you’ll see for yourself (the borders just appears at the wright side and the bottom of the #footer, and that because the rest of the #footer is hidden under the #content and the #navigation).
This will be even more obvious if the #content and the #navigation is moved down (for example with margin-top: 20px): Now you’ll see all sides of the #footer and its border and how it sits — just like the rule said it should — beneath the #header (the #content and the #navigation was taken out of the normal flow, etc.).
The thing that still bothers me is that the TEXT NODE “Footer” puts it self just beneath the #navigation (and in the bottom wright corner of the #footer).
When looking at the HTML DOM Node Tree
(“http://www.w3schools.com/htmldom/dom_nodetree.asp”)
the text node “Footer” in the article example is a child of the #footer and I would expect it to be at the left top of the #footer, but because it doesn’t I’ve obviously missed something.
This behavior doesn’t change if you put the text node “Footer” in a paragraph (and it was this behavior that fist cheated me to believe that ALL of the #footer did the same, was put under the #navigation — and to the wright of #content).
If anybody could explain the behavior of the text node in this example I would be happy.
“rlramirez77″ has an interesting question in post #48: “Using example E2, if you increase the height of just the Blue box, how do you get the Green and Orange boxes to float up back under the Red box?”
I’m not so sure how often you will apply this kind of layout in a daily practice, but the code principles in general, and specifically in this case, are of basic interest for me.
If the Pink and Blue are considered having been “taken out of the normal flow and sent as far to the left of the parent element” then you expect “”¦the Green and Orange blocks to act as if they’re not even there (the Pink and Blue)”¦”.
So why the space that emerge (or are not filled) between the Pink bottom and Green top line?
All answers, tips, links, etc. are very much appreciated.
The second question, how to get the Pink and Green touching each other, will (hopefully) be answered when knowing the answer of the first.
(I tested to use the inline-block method [post #15 and #41]. It has its advantages, but I didn’t manage to solve this specific issue using it. Maybe someone else? Gunnar Bittersmann or Peter Weil perhaps?)
“ghpeel” says (post #47):
“Its been a while since I’ve visited ALA, but I have to say that I’m pretty shocked that in 2011 there’s an article on clearing floats. ” Etc., etc.
This piece of information could have been useful for me, being a newbie as I’m, if the sender also would have offered some of his wisdom of how it’s done today.
So, if the methods in this article are outdated— which are the methods of today?
I really want to know. From anyone that knows.
Hey Noah, fantastic article. There’s one thing I’m not understanding, however.
When you introduce floats, you say that floated elements are removed from the normal flow, and that elements following it will be pushed up beneath the floated elements.
However, example G in the section “using floats for layouts” doesn’t seem to follow this rule. In this example, the “navigation” and “content” elements are both floated. According to what you said in the first section, the “footer” element should therefore be pushed up beneath both elements, invisible to us. Instead, however, the footer element is pushed to the right, below the navigation element.
Can you explain this behavior?
Those collapsing elements can be problematic when trying to get containers to grow. I usually make sure the parent element is floated as well to encourage its growth, but it doesn’t always work when I’m playing around with some unorthodox layouts. I’m going to adopt more clears into my life. I usually employ them after floats; never thought to use them to combat collapsing containers. Awesome article! Thanks!
I can breath again. I’ve read many articles on floats and clear. Best lesson on clear I’ve run across. A lifesaver when having a repeating background in a container. And really helpful because it is written and illustrated in a language that novices can understand. Thanks.
Noah thank you for the clear and simplifying way you explained floats. That said where can I get a “Bacon Loving Unicorn” that you mention?
I just can’t explain you how much this article has helped me “clear:both;” my mind and body from understanding this issue.
Great Article!