CSS Float Theory: Things You Should Know

Advertisement

The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted – by developers and browsers.

Still, if you take a closer look at the float theory, you’ll find out out that it isn’t that complex as it appears to be. Most related problems are caused by the older versions of (take a guess) Internet Explorer. If you know the bugs, you can control the way information is presented in a more sophisticated, profound way.

Let’s try to tackle the issue and clarify some usual misunderstandings, which always appear once floats are being used. We’ve browsed through dozens of related articles and selected the most important things you should keep in mind developing css-based layouts with floats.

What You Should Know About Floats

  • “The practice of flowing text around an image goes back a long, long time. That’s why the ability was added to the Web starting with Netscape 1.1, and why CSS makes it possible using the property float. The term “float” refers to the way in which an element floats to one side and down, as described in the original “Additions to HTML 2.0″ document that accompanied the release of Netscape 1.1.”Containing Floats1
    [Containing Floats192]
  • “A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. [...] When a box is taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it.” [Float Positioning3]
  • “When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are float: left, float: right or float: none.” [Floatutorial: Float Basics151154]
  • “You should always set a width on floated items (except if applied directly to an image – which has implicit width). If no width is set, the results can be unpredictable.” [Floatutorial: Float Basics151154]
  • “For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it. Second, unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it. Finally, a floated box can overlap block-level boxes adjacent to it in the normal flow.”CSS Positioning: Floats6
    [CSS Positioning: Floats7]
  • “The first thing we need to remember is that a floating element is shifted either to the left or to the right. It is not possible to make an element float in the centre, something that often is frustrating for beginners. The basic rule is that a floating element is only shifted sideways.” [Float Layouts4818171698]
  • “When we float an element it is shifted to the right or to the left until it reaches the edge of the containing block. If we then float another element nearby in the same direction, it will be shifted until its edge reaches the edge of the first floating element. [...] If we float more elements in the same direction they will stack up, but sooner or later we’ll run out of space [...] when there is insufficient space on the line, they are shifted downward until they fit.” [Float Layouts4818171698]
  • Containing blocks or containing boxes: “A containing block is a box or block that contains other elements (descendant boxes). An element’s containing block means “the containing block in which the element lives”. [Floatutorial10]
  • “Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.” [Floatutorial: Float Basics151154]
  • “When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block’s padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side.” [CSS Positioning: Floats12]
  • “Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.”W3C Visual Formatting Model13
    [W3C Visual Formatting Model14]
  • “If there isn’t enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.” [Floatutorial: Float Basics151154]
  • “A floating box can never end up above the upper edge of the line where it’s created. [...] The upper edge of a floating box is aligned with the upper edge of the current line box (or with the bottom edge of the previous block box, if there is no line box).” [Float Layouts4818171698]
  • “In order to really understand float theory you have to understand what a line box means in CSS. Unfortunately, that in turn requires you to understand what is meant by an inline box. [...] An inline box is generated by those elements that aren’t block-level, such as EM. [...] A line box is an imaginary rectangle that contains all the inline boxes that make up a line in the containing block-level element. It is (at least) as tall as its tallest line box.” [Float Layouts4818171698]
  • “If we enclose each column in a DIV element with float: left they will appear side by side, just as we expect columns to do. If we then want a full-width footer to be shown at the bottom, no matter which column happens to be longest, we only need to set clear: both on it.” [Float Layouts4818171698]
  • “The potential drawback to using floats to contain floats is that you rely on browsers to consistently interpret the layout of multiple nested floated elements. The situation becomes more fragile if these floats are part of a more complicated layout, one possibly using floats, positioning, or tables.” [Containing Floats192]

Clearing the floats

  • “Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the “clear” property to these following elements. The four options are clear: left, clear: right, clear: both or clear: none.” [Floats and "clear"20]
  • How to clear CSS floats without extra markup – different techniques explained. There are three major approaches: a) Floating the containing element as well, b) Using overflow: hidden on the container, c) Generating content using the :after CSS pseudo-class. A test-page for techniques21. [How to clear CSS floats without extra markup22]
  • “The standard method of making an outer container appear to “enclose” a nested float is to place a complete “cleared” element last in the container, which has the effect of ‘dragging’ the lower edge of the containing box lower than the float.”
  1. <div> <!-- float container -->
  2. <div style="float:left; width:30%;"><p>Some content</p></div>
  3. <p>Text not inside the float</p>
  4. <div style="clear:both;"></div>
  5. </div>
  • [How To Clear Floats Without Structural Markup312723]
  • “A common problem with float-based layouts is that the floats’ container doesn’t want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you’ll have to command the browsers somehow to stretch up the container all the way. You can clear the floats using overflow method24.”
    Clearing Floats25
    [Clearing floats26]
  • Using :after: imagine that we use :after to insert a simple character like a ‘period’, and then give that generated element {clear: both;}. That’s all you really need to do the job, but no one wants a line space messing up the end of their clean container box, so we also use {height: 0;} and {visibility: hidden;} to keep our period from showing.
  1. .clearfix:after {
  2. content: ".";
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }
  • [How To Clear Floats Without Structural Markup312723]
  • Clearfix: “When a float is contained within a container box that has a visible border or background, that float does not automatically force the container’s bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. [...] IE/Win does enclose a float within a container ‘automatically’, but only if the container element has a stated dimension.” [Easyclearing: How To Clear Floats Without Structural Markup28]

CSS Float Bugs

  • When [...] container element has links inside, following the float. When this happens and certain links are hovered, the auto-enclosing behavior is toggled or “switched off”, causing the lower edge of the container box to suddenly jump up to the bottom of the non-floated content. Hovering other links restores the behavior. This interesting effect is of course called the IE/Win Guillotine Bug29. The toggling only occurs when a:hover is used to change the link background or many other styling changes, such as padding, margin, or any font styling on the link. Strangely, having the text color change on hover does not toggle the bug.
    IE/Win Guillotine Bug30
    [How To Clear Floats Without Structural Markup312723]
  • The IE Escaping Floats Bug32: “If you use a div box with margins, borders and a number of left floated divs, you’ll get two display errors in IE Win. One, the container is only containing the last line of floats , and the floats are also running off to the right, all the way to the right screen edge. also causes a horizontal scrollbar at many screen sizes. [...] Solution: a height can be given to IE/win and not affect the displayed height of the container. This is possible because IE has another non-standard behavior concerning boxes and dimensions.” Holly Hack: assigning a height to the element, i.e. height: 1%;.
    IE Escaping Floats Bug33
  • The Win/IE6 Peekaboo bug34: “A liquid box has a float inside, and content that appears along side that float. In IE6 the content disappears. When you scroll down, or perhaps switch to another window, upon returning back there it all is (this long standing bug has been suppressed in IE7).
    Win/IE6 Peekaboo bug35
  • “IE/Win gives a left floated block a right margin of 3px. No matter what you do, the margin is still there. To see this in action, check the floating bug36 first and then the double float fix37.” This bug is also called The IE Three Pixel Text-Jog38 [Floating Bugs39].
  • IE Duplicate Character Bug4340: “Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. The direct cause is nothing more than ordinary HTML comments, such as, <!-- end left column -->, sandwiched between floats that come in sequence. Bugfix41.
    IE Duplicate Character Bug42
    [IE Duplicate Character Bug4340]
  • “One of the most common tasks when laying out the content of a web page is floating images to the right or left so that text flows around them. The addition of the clear to the floated image ensures that each one will always sit below the previous one. However, placing the float and clear properties on the same element can cause large gaps to appear in Internet Explorer (IE) — gaps that take more complicated CSS to fix than what we’ve used so far. Bugfix44.” [Close Gaps Next to Floated Images in Internet Explorer45]
  • “You place a left float into a container box, and use a left margin on the float to push it away from the left side of the container. In Internet Explorer the left float margin has been doubled in length!” [The IE Doubled Float-Margin Bug46]
  • “The bug demonstrated here causes in-line elements (images, text) adjacent to a floated div to appear to be indented from their expected location. The indentation is caused by IE/Win’s weird handling of margins on floated elements.” [Floats, Margins and IE47]
  • “There is a simple solution that fixes many of the IE float bugs. All floats become a block box; the standard says that the display property is to be ignored for floats, unless it’s specified as none. If we set display:inline for a floating element, some of the IE/Win bugs disappears as if by magic. IE/Win doesn’t make the element into an inline box, but many of the bugs are fixed.” [Float Layouts4818171698]
  • “Using a combination of float and negative margins on an element makes any links in the element unclickable in Safari 1.3 and Safari 2.0. Text also becomes very difficult to select, and if you tab through the links they disappear when they lose focus. A workaround is to add position:relative to the CSS declaration for any floated elements with negative margins.” [Float + negative margin problems in Safari49]
  • “MSIE 7 now correctly implements the W3C specification by collapsing containers that include floated children. However, as it has not implemented generated content, the so called easy clearing method50 is not an option for clearing floats in MSIE 7. The overflow method is an appropriate solution for all versions of Internet Explorer:
  1. #content { overflow : hidden; _height : 1%; }

CSS Float Tutorials and Techniques

  • Float Containing Rules By Browser
    52Containing Rules By Browser53
    The table shows which rules cause a container to clear its floats in each of the main browsers.
  • CSS vertical centering using float and clear – crossbrowser54
    “The box stays in the middle of the browser’s viewport. The content does not disappear when the viewport gets smaller than the box.”
  • A floated page layout55
    This tutorial shows you how to create a page layout like this56, using web standards and CSS. Such a layout could have any number of uses, of which a photo gallery is only the most obvious. The page I’ve linked to there clearly isn’t finished, I’ve just tried to keep it simple so we can focus on the layout of the images and the text.
  • Build a better Web site by understanding floated elements in CSS57
    This article provides a brief introduction to these floated elements, explaining the CSS float and clear directives and providing some examples of how you can use them to better position HTML elements on a Web page.
  • Create Columns with Floats58
    In general, there are currently two ways to create a multi-column layout in CSS: absolute positioning or floating. The vast majority of the time, floating will be your method of choice in laying out your web pages with CSS. In this tutorial, you’ll learn how to create the look of columns using the float, width and margin properties.
  • Safe Lists Next to Left-Floated Elements
    There are lots of different methods to format nice html lists. But are those methods reliable in all contexts and in all browsers? In this article, we’ll have a look at a simple context: a list with some left-floated element next to it.
  • Creating Liquid Layouts with Negative Margins [and Floats]59
    I took opportunity to demonstrate an under-used aspect of CSS: negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar.
  • Image floats, without the text wrap!
    60Image floats, without the text wrap!61
    How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image?
  • Floating an image to the right
    62Floatutorial63
    Float an image to the right of a block of text and apply a border to the image.
  • Floating an image and caption
    64Floatutorial65
    Float an image and caption to the right of a block of text and apply borders using Descendant Selectors.
  • Floating a series of “clear: right” images
    66Floatutorial67
    Float a series of images down the right side of the page, with content flowing beside them.
  • Floating an image thumbnail gallery
    68Floatutorial69
    Float a series of thumbnail images and captions to achieve an image gallery.
  • Floating next and back buttons using lists
    70Floatutorial71
    Float a simple list into rollover “back” and next “buttons”.
  • Floating inline list items
    72Floatutorial73
    Float a simple list, converting it into a horizontal navigation bar.
  • Floating a scaleable drop cap
    74Floatutorial75
    Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs.
  • Liquid two column layout76
    Float a left nav to achieve a two column layout with header and footer.
  • Liquid three column layout77
    Float left and right columns to achieve a three column layout with header and footer.
  • CSS Float Html Tutorial78
    It’s time to think outside the box, or maybe, more accurately, floating alongside of it. Where did we lose our collective CSS coding creativity? CSS allows so much freedom from traditional table based layouts that we sometimes do not consider page and layout design alternatives. What a pity. Time to think outside the box!

Footnotes

  1. 1 http://www.complexspiral.com/publications/containing-floats/
  2. 2 http://www.complexspiral.com/publications/containing-floats/
  3. 3 http://css.maxdesign.com.au/floatutorial/definitions.htm
  4. 4 http://css.maxdesign.com.au/floatutorial/introduction.htm
  5. 5 http://css.maxdesign.com.au/floatutorial/introduction.htm
  6. 6 http://www.brainjar.com/css/positioning/default3.asp
  7. 7 http://www.brainjar.com/css/positioning/default3.asp
  8. 8 http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating
  9. 9 http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating
  10. 10 http://css.maxdesign.com.au/floatutorial/definitions.htm
  11. 11 http://css.maxdesign.com.au/floatutorial/introduction.htm
  12. 12 http://www.brainjar.com/css/positioning/default2.asp
  13. 13 http://www.w3.org/TR/CSS2/visuren.html#floats
  14. 14 http://www.w3.org/TR/CSS2/visuren.html#floats
  15. 15 http://css.maxdesign.com.au/floatutorial/introduction.htm
  16. 16 http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating
  17. 17 http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating
  18. 18 http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating
  19. 19 http://www.complexspiral.com/publications/containing-floats/
  20. 20 http://css.maxdesign.com.au/floatutorial/clear.htm
  21. 21 http://www.robertnyman.com/css-clearing-floats/css-clearing-floats.htm
  22. 22 http://www.robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/
  23. 23 http://www.positioniseverything.net/easyclearing.html
  24. 24 http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
  25. 25 http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
  26. 26 http://www.quirksmode.org/css/clearing.html
  27. 27 http://www.positioniseverything.net/easyclearing.html
  28. 28 http://www.positioniseverything.net/easyclearing.html
  29. 29 http://www.positioniseverything.net/explorer/guillotine.html
  30. 30 http://www.positioniseverything.net/explorer/guillotine.html
  31. 31 http://www.positioniseverything.net/easyclearing.html
  32. 32 http://www.positioniseverything.net/explorer/escape-floats.html
  33. 33 http://www.positioniseverything.net/explorer/escape-floats.html
  34. 34 http://www.positioniseverything.net/explorer/peekaboo.html
  35. 35 http://www.positioniseverything.net/explorer/peekaboo.html
  36. 36 http://www.456bereastreet.com/lab/floating_bug/index.html
  37. 37 http://www.456bereastreet.com/lab/floating_bug/fixed.html
  38. 38 http://www.positioniseverything.net/explorer/threepxtest.html
  39. 39 http://www.456bereastreet.com/archive/200309/floating_bugs/
  40. 40 http://positioniseverything.net/explorer/dup-characters.html
  41. 41 http://positioniseverything.net/explorer/dup-characters.html
  42. 42 http://positioniseverything.net/explorer/dup-characters.html
  43. 43 http://positioniseverything.net/explorer/dup-characters.html
  44. 44 http://www.communitymx.com/content/article.cfm?page=2&cid=B03A6
  45. 45 http://www.communitymx.com/content/article.cfm?cid=B03A6
  46. 46 http://www.positioniseverything.net/explorer/doubled-margin.html
  47. 47 http://www.positioniseverything.net/explorer/floatIndent.html
  48. 48 http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating
  49. 49 http://www.456bereastreet.com/lab/float_negative_margins/
  50. 50 http://www.positioniseverything.net/easyclearing.html
  51. 51 http://www.stuffandnonsense.co.uk/archives/clearing_floats_without_structural_markup_in_ie7.html
  52. 52 http://www.ejeliot.com/samples/clearing/rule-support.html
  53. 53 http://www.ejeliot.com/samples/clearing/rule-support.html
  54. 54 http://d-graff.de/fricca/center.html
  55. 55 http://www.westciv.com/style_master/house/tutorials/quick/floated_layout/index.html
  56. 56 http://www.westciv.com/style_master/house/tutorials/quick/floated_layout/photos.html
  57. 57 http://articles.techrepublic.com.com/5100-3513_11-6146768.html
  58. 58 http://www.communitymx.com/content/article.cfm?cid=F41AE
  59. 59 http://www.alistapart.com/articles/negativemargins/
  60. 60 http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
  61. 61 http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/
  62. 62 http://css.maxdesign.com.au/floatutorial/tutorial0106.htm
  63. 63 http://css.maxdesign.com.au/floatutorial/tutorial0106.htm
  64. 64 http://css.maxdesign.com.au/floatutorial/tutorial0211.htm
  65. 65 http://css.maxdesign.com.au/floatutorial/tutorial0211.htm
  66. 66 http://css.maxdesign.com.au/floatutorial/tutorial0306.htm
  67. 67 http://css.maxdesign.com.au/floatutorial/tutorial0306.htm
  68. 68 http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
  69. 69 http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
  70. 70 http://css.maxdesign.com.au/floatutorial/tutorial0513.htm
  71. 71 http://css.maxdesign.com.au/floatutorial/tutorial0513.htm
  72. 72 http://css.maxdesign.com.au/floatutorial/tutorial0613.htm
  73. 73 http://css.maxdesign.com.au/floatutorial/tutorial0613.htm
  74. 74 http://css.maxdesign.com.au/floatutorial/tutorial0706.htm
  75. 75 http://css.maxdesign.com.au/floatutorial/tutorial0706.htm
  76. 76 http://css.maxdesign.com.au/floatutorial/tutorial0816.htm
  77. 77 http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
  78. 78 http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    Finally! An informative article! Don’t get me wrong, you guys put together some decent lists of cool designs and whatnot, but lots of it isn’t very useful. This on the otherhand, is simply an amazing post. Thanks!

    4
  2. 2

    Looks like you used my del.icio.us float bookmarks ;)

    1
  3. 3

    Very helpful piece.
    Your commenting was broken for the last few days, but still I return!

    0
  4. 4

    Excellent article. CSS Float has been a little gray area with me. The information is very well organized and crisp.

    Keep them coming!!

    0
  5. 5

    excellent article
    Keep going…

    2
  6. 6

    Thanx! Very useful article!

    1
  7. 7

    Himm nice and usefully article.

    Thank you for these informations.

    0
  8. 8

    Really very helpful .
    You have collected all tips and hacks in one place.

    2
  9. 9

    Phil From Loreauville

    May 4, 2007 1:13 am

    Awesome info once again! One of the biggest problems i have with CSS is the positioning of elements. This can only help.
    One request- Would it be possible for Smashing Magazine to make it where we can print up these articles?

    0
  10. 10

    thanks for you excellent site!

    3
  11. 11

    Great article. I’ve come across many of these errors and wish I would have read all this a long time ago!

    0
  12. 12

    Robert Tipping

    May 5, 2007 9:08 am

    You guys have the best site on the web period keep up the great work .This is an amazing collection of css info answered questions iv had for years brilliant.

    0
  13. 13

    This is great but why do you call it a “theory”?

    1
  14. 14

    It smashes. But, don’t you think sometimes there’s too much information there that readers rarely come to a point after reading them?

    The excessive abundance of information may lead to disinformation.

    1
  15. 15

    Wow,

    Nice article. Thanks!

    0
  16. 16

    I’m using
    a) Floating the containing element as well,
    b) Using overflow: hidden on the container

    I didn’t know about
    c) Generating content using the :after CSS pseudo-class.

    Thanks

    0
  17. 17

    Awesome! Thanks for the article…

    0
  18. 18

    flash web design

    May 28, 2007 6:13 pm

    It’s certainly a very useful article for budding programmers as me . I appreciate your efforts. We use to come across all these problems in our daily work. It’s always good to put some light on an Imp. subject as this.

    0
  19. 19

    Thank you.

    Floats can be quite a pain when floating multiple items.

    0
  20. 20

    Amazing article!

    —-

    One thing though.

    One quote says: A line box “is (at least) as tall as its tallest line box,”

    Shouldn’t it say: A line box “is (at least) as tall as its tallest INline box”?

    0
  21. 21

    Thanks for good stuff and cool site.

    1
  22. 22

    floating is the best way to go when you are coding for a script based template like wordpress or phpLD. It makes the life so much easier and you can change the site in like minutes.

    0
  23. 23

    Its indeed a good tutorial, covers most of the tricky parts of floating. Dealing with floats is probably the most frustrating part of CSS, especially when you get your layout just right for Firefox, only to realize that it’s totally messed up in IE. Thanks for the detail explanation.

    1
  24. 24

    this is help me out, coz I’m new in css & really got a lot problem with float teory, thanks, I would practice it.

    0
  25. 25

    Web Design Company

    January 14, 2008 10:34 am

    Great Article. Many Thanks for quality post. I appreciate your efforts.

    0
  26. 26

    Excellent article!

    0
  27. 27

    Hello,
    It would be good fo see an additional tutorial that explains how to properly float an image right or left when the image height is TALLER than the text next to the image being floated.
    I tried the clearfix remedy and it seems to work in FF 2, but fails horribly in IE 7, I don’t know yet what happens in IE 6.
    It may be more complicated because I am working within DotNetNuke.
    Please email me if my question is unclear.
    Thank you, Tom

    0
  28. 28

    This article solved a lot of misunderstandings I had with floats!

    Thank you!

    0
  29. 29

    i think it,s a great article a very good article.

    0
  30. 30

    I love you… I truly, deeply love you

    1
  31. 31

    Informative and comprehensive. BUT surely anything that needs this level of complexity and so many qualifications to explain it then so many wriggles and workarounds to implement is fundamentally flawed in theory.

    NO it isn’t just that IE is a pain (although it is). The admission is there in the theory that floated divs can’t be centred, that they don’t keep any height relationship to neighbouring divs, and “… non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist”. etc etc.

    OK this is all consistent with the theory, but the theory is simply not fit for purpose in that case. There’s got to be a simpler way to control onsreen layout without contravening the principle of separating content from markup. We live in hope…

    2
  32. 32

    I would appreciate any help about this problem:

    I want to create a layout with a navigation div at the left and a content div on the right. I’m using float:left on the nav div to accomplish it.
    Unfortunately, everytime I use floats in the content div, I can’t clear them without also clearing the navigation div.

    Does anyone have a solution to this problem?

    0
  33. 33

    Not quite certain I am correctly visualizing what you are saying, the way I am understanding you, it should work. Are you, perhaps, clearing the content div rather than elements within it?

    0
  34. 34

    a million ways to skin a cat. ewwww. i suggest Andy Budd’s “CSS Mastery” book for all concerned with floats as well as standards in general and proper css techniques. it provides a great background to help understand all of the strangeness. it has made my life complete.

    A possible point of confusion: The second bullet point given at the top of this article may be confusing to some because it reads: “A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible.” Shouldn’t it be a little more clear and simply read “A floated box is taken out of the normal flow of the document” ? Sounds picky, I know, but I thought it was worth mentioning.

    1
  35. 35

    Thanks for the great article!

    As a software engineer (not a designer) I find learning CSS difficult because often it is incredibly illogical, counter-intuitive and just doesn’t do what you tell it to do. From a computer science point of view this is pretty bad. Software engineers except things to be logical and intuitive. Then again, CSS is not programming so I can’t compare it to programming languages.

    So thanks for the great information! It’s cleared many things up about floats.

    For me, I need to spend most of my time on the backend and only have a fraction of time to devote to the front-end (e.i XHTML/CSS). Unfortunately I find myself spending an unacceptable amount of time working on CSS hacks and making things line up to within 1 pixel and other insane stuff like that. The reason why I can’t tolerate hacks and “tweaking” is because those things are big sins in computer science. Without smashing magazine I would be stuck forever.

    Thanks.

    1
  36. 36

    “A possible point of confusion: The second bullet point given at the top of this article may be confusing to some because it reads: “A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible.” Shouldn’t it be a little more clear and simply read “A floated box is taken out of the normal flow of the document” ? Sounds picky, I know, but I thought it was worth mentioning.”

    I think they were trying to be as specific as possible. When a floated box is taken out of the normal flow of the document, what does that mean? Does it mean it “breaks out” of its containing DIV too? It’s more clear to say that it is “shifted to the left or right as far as possible”. If the float is inside a div, it will shift as far as possible ONLY to the edge of the containg div.

    0
  37. 37

    Good article. Being a new to div based HTML, I found it very usefull. The links provided within the article are really good. ThnX .

    0
  38. 38

    Hmm…. something odd is up. The words “CSS”, “float” and “images” are all highlighted despite not arriving at this site via google, but rather through the css category.

    It makes it a little distracting to read and I’m sure it’s not an intended display for versions of this page *not* arrived at via a Google search.

    I’m not being at all critical, just trying to be helpful. :-)

    0
  39. 39

    Brilliant! Thanks for fixing it. So much more delightful to read now! :-)

    0
  40. 40

    …er, maybe not. I spoke too soon.

    Sorry if I seem ridiculous.

    0
  41. 41

    PAMELA ANDERSON

    June 6, 2008 3:16 am

    Thanks for clearing the Float concept.
    But who ever is commenting should remember that this site is being read by lots of people so kindly and please stop using slang languages.That acts like a rotten apple among the good ones.

    1
  42. 42

    Woohoo! I can now delete my “float” bookmark folder with it’s 100 or so links and replace it with this one page :)

    0
  43. 43

    The pseudo class doesn’t work in every browser.

    0
  44. 44

    The overflow hidden / width 100% methode works in IE6 and higher, FF and Safari. I don’t ever have to use any hacks, which is better I think.

    div.wrapper {
    width: 100%;
    overflow: hidden;
    }
    div.col1 {
    float: left;
    width: 200px;
    }
    div.col2 {
    float: right;
    width: 600px;
    }

    A advantage of using float:left and float:right if you need 2 columns is that you automatically create a padding/margin in the middle you don’t have to define.
    Another advantage is that all your items inside these columns don’t need any width’s, they automatically take the space they have and can be used in other column width with the same code.
    A disadvantage of the wrapper div is that you can’t add any horizontal paddings or margin (because of the width: 100%), vertical however is no problem.

    0
  45. 45

    CSS hacks are for non-ninja developers. Ultimate mastery comes not of the body, but of the mind.

    0
  46. 46

    Over a year later, and this article is still saving lives. Thank you!

    0
  47. 47

    1-800 thank you. over the last 8 years i’ve beat my head against the wall many a time dealing with floats. hopefully this much needed compendium of float knowledge will save someone starting out the hours, no days, of time i’ve spent wrangling the ever elusive float.

    0
  48. 48

    Man, I’m gonna buy you a monkey. I have been battling and issue with floats messing things up for me all day. Your article solved my prob in two seconds. Where do I send the monkey?
    lol
    thanks

    0
  49. 49

    This is awesome, the float clear :after is exactly the sort of thing I’ve been looking for! Thanks, this website is amazing

    0
  50. 50

    Hi, nice tutorial but for so long I have been sufering with a bug between float elements and any IE version. For test take a look at this code:

    <a href="AnyPage.aspx"><span
    style="float:left;">
    <img src="images/icon.gif"/>Test</span></a>

    In a anchor If I put an img tag in tags like span, p, div… that has a float css property the event click doesn’t works if I click over the image. The event only ocurrs if I click over the text.

    I use floats elements and anchor css events to create a visual dynamic for buttons.

    0
  51. 51

    I’ve been coding with floats for a couple of years and have never used “clear” in the code. I haven’t seen a good reason to actually use this based on the way i build sites. It appears that if you make sure your width fits within your container divs and remember where everything is going to be wrapping you’re good to go.

    Could anyone explain why you would actually need to clear your float? showing an example of a non cleared and a cleared examples?

    thanks

    0
  52. 52

    One to keep. A nice comprehension of the float soup. Still IE will break it somewhere down the road for you; at least that’s my experience. On a side note: why are we still waiting for a vertical align possibility in CSS?

    0
  53. 53

    I faced some css clearing errors listed bolow.
    In ie6 it is not showing content under footer.

    (URL address blocked: See forum rules)/index.php

    (URL address blocked: See forum rules)/kompiuteriai.php

    (URL address blocked: See forum rules)/naudoti.php

    I sinceraly hope someone could help me by telling that I missed ;)

    0
  54. 54

    good article, thanks

    0
  55. 55

    Nice article. fix one defect using technics there.

    0
  56. 56
  57. 57

    Thanks, ive just spent the 2nd half of today going through this, some really helpful explanations and it clears up some of the confusions.

    0
  58. 58

    Nice article…. it helps a lot :)

    0
  59. 59

    No mention of liquid images to scale content dimensions?

    0
  60. 60

    kindly use your imagination to interpret the following round brackets – this blog comment tool appears to remove code inside html brackets

    baking accessible floats for thumbs

    The focus of this comment would would be LIQUID images.

    Floating a liquid image into the margin makes zooming fun and information accessible. Nice thing about liquid image dimensions is they fit almost any device, and are easily avoided by print machines, teletypers and similar machines. Floating liquidity can also dress-up inline elements, leaving extra room for creative tweaks.

    .floatcenter{margin:1em auto;width:70%;}
    .imgthumb{float:left;}

    (blockquote class=”floatcenter”)
    (img alt=”” class=”imgthumb” height=”10%” width=”10%” src=”image.png” /)
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.
    (/blockquote)

    Why this works is because the same extra top secret patents browsers use to build their box models around screen center are not crimped for media the way they are for that glaring “float:center” [oops] ommision.
    In the now dead original xhtml2.1 draft the manufacturers even tried to kill this inline image gem too. To be kind, we should consider the entirely boxed liquid image.

    But that is for another Smashing article.

    0
  61. 61

    This statement is not accurate:
    “For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally,”

    Floating a box is often the ONLY way to get it to shrink wrap it’s content, NOT expand to fill it’s containing block horizontally. You have described the opposite of the actual behavoir here.

    0
  62. 62

    excellent article

    0
  63. 63

    One possible way to “shrink wrap” your content would be to use width: auto;. But, as with many CSS selectors and attributes, your mileage may vary based on browser make and model. ;)

    0
  64. 64

    The quote about not being able to center with float is so true! I found it so frustrating when I first started.

    1
  65. 65

    I have been researching issues with IE7 only, which is strange – the flow operates in all browsers including IE8.

    A containing block is floated and has multiple tiers of nested elements, some of which contain floated elements themselves.

    The container has a fixed width, the two child containers are floated and also have fixed widths.

    The total sum of the two child containers is double that of the parent. Using overflow, the children are floated left and the last block in the order is hidden from view (similar to a mask in Flash.

    This works in all browsers except IE7, where the last block on the order is shown floated next to the first block, but appears broken outside of the parent (i.e with borders on, the border does not wrap both elements).

    No idea how to resolve it but I think that it is to do with a large quantity of nested floats.

    0
  66. 66

    great thanks

    0
  67. 67

    very useful article!!!thinks

    0
  68. 68

    I like to add the clear float solution to nearly all block level elements except for the footer and p element. It can mess up the vertical margins as elements don’t collapse correctly, but if you using padding instead, it works really well. I wrote an article on it.

    clear float

    0
  69. 69

    Thanks, clear: was exactly what I was looking for and new information for me! Very helpful!

    0
  70. 70

    Incredible article ! I was banging my head since this morning over “CSS float” issues, but your article provided me the solution right away. Thank you !

    0
  71. 71

    I’m sorry but I just read some 8 sentences (I guess, some 3 paragraphs) then scrolled directly to the bottom to view the comments.

    May I argue about setting every floated element with a width, I mean, giving a width for every floated element is unnecessary, as long as you clear the following tag or element which is next to it that you don’t want to float with it, something like …

    #search {
    float: right;
    }

    #content {
    clear: right;
    }

    Unless you will explicitly use “position: relative” to place it beside (or along) the floated element, that’s the only case I see where giving widths for the floated one will be necessary; otherwise, it’s only wasting the file size.

    The tricks are also helpful but remember that tricks should only be the last resort; they are non-essential if you have used the floats properly in the first place.

    0
  72. 72

    Oh my goodness!!! This is such a lifesaver for a web developer. I am able to keep clean, semantic and valid code with its help. Darn IE … I ought to choke the life … uhmm yeah

    0
  73. 73

    great thanks

    0
  74. 74

    EXCELLENT information!

    0
  75. 75

    this is very useful article to me but i have a question. i want make Liquid three column layout. both left and right panel should be fixed and middle panel will be stretchable. when we will remove right panel than middle panel should be cover all remaining space.

    0
  76. 76

    :)

    0
  77. 77

    I will be continually searching on line for ideas that will help me. Thanks a lot!

    0
  78. 78

    Hello,
    I’m getting through this amzing tutorial but the links “floatelayouts” at the top (http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating) don’t work. Could you fix, please?
    thanks.

    0
  79. 79

    I’m using WordPress. I’m using a two column format (left is main content, right is narrow sidebar). The sidebar is set to a specific width, with float:right. However, if I set the left column to a specific width, then (of course) the main content will not expand to the full width of the page — when there be no content in the sidebar. But, I’d like for the main content to fill the page when the sidebar is not being used on that page.

    I’m using the following style, and it appears to work. But, I’m wondering if it’s unreliable and/or unstable:

    div#mainColumn{
    float: none;
    }
    div#sidebarColumn {
    float: right;
    width: 200px;
    }

    1
  80. 80

    Pretty legendary article, at last a comprehensive float almanac :-)

    0
  81. 81

    outdated programmer

    July 18, 2013 1:15 pm

    Cynglas and Deltawing1 have it right that there are serious problems with “float”. The first is that there is no means of linking the floater with any block–in actual printed matter every floater belongs to some block. When that block comes to an end, automatic clearing is right.
    An example comes to mind: one has gone on a trip to Turkey, and come home with pictures to illustrate one s story. The best is if the picture appears first as with “align=top”, and the words flow around it, but only the words of that block. If another picture soon follows, if it fits left or right of the earlier, it is set there, but if not, it causes a break until it fits, and so on to the end.
    Eric s comments about keeping track of width are only witness to “float” s faults.
    The name “float” is quite misleading: really the floater s position is, in a manner, rounded or fixed. When one sees in print “see sidebar”, the sidebar s position is “rounded” into fitting into a page, or column, or ….

    0
  82. 82

    Thanks for sharing this great article with all of us. Very well explained and well written article.

    0
  83. 83

    I assume a large portion of this is now incorrect or am I completely wrong in understanding, specifically, specifying a width for floated elements is a must.

    From what I’ve seen in the last few years it is the norm to omit the width to intentionally “ask” the browser to adjust the width of an element to that of it’s contents, no?

    0

↑ Back to top