If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Floats is like the base principle in CSS. Often it is being made confusion and floats are being accused for floating the context around it for the making readability and usability problems. Though the problem doesn’t come from the theory, more from the way it is interpreted by developers and browsers.
Also if you are looking better at the theory you will see that it is not such hard at it appears to be. The big problems are made by the previous versions of I.E. If you are very PRO and know the bugs, you can control the information in way that is presented more sophisticated.
Trough this article we try to make things more easy and clarify them, for the floats that are being used. The results that we present here are more related articles and selected from important CSS-based layouts wit floats.
Tips about Floats
“A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content can flow down the right side of a left-floated box and down the left side of a right-floated box.” Floatutorial
“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 Layouts
“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, which is way too complicated to explain in any detail here. If you’re interested (and slightly masochistic) you can try to decipher the explanation in” w3.org
“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 Layouts
“If floats are to be used in creating non-table layouts, then there needs to be a way to make their containing elements stretch around them. At present, this requires a bit of a structural hack. Since we want the bottom of the containing element to be placed clear past the bottom of the float, then clear is our answer. We need only insert a block-level element just before the end of the container, and clear it.” Containing Floats
“When an element specifies position:relative; it is initially positioned following the normal flow rules. Surrounding boxes are positioned accordingly. Then, the box is moved according to its offset properties.” CSS Positioning
“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.” Float Tutorial
“A floated box must have an explicit width (assigned via the ‘width’ property, or its intrinsic width in the case of replaced elements). Any floated box becomes a block box that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. The top of the floated box is aligned with the top of the current line box (or bottom of the preceding block box if no line box exists). If there isn’t enough horizontal room on the current line for the float, it is shifted downward, line by line, until a line has room for it.” Visual formatting model
” There are a few things you should note regarding floated boxes. 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. As such, floated boxes are always treated as block boxes, even if they are defined using inline elements.” CSS Positioning
Float Bugs
” A problem can arise if the text beside an image is not long enough to wrap around it. In this case, the next image could potentially float up into this space beneath the text, instead of sitting directly beneath the previous floated image.” Close gaps Next to Floated Images in I.E
” 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. Those familiar only with Explorer for Windows may scratch their heads and say “That’s not right!” True, IE/Win does enclose a float within a container ‘automatically’, but only if the container element has a stated dimension, and in any case it’s a W3C spec violation. This illegal behavior can also be ‘toggled’ on and off by links within the container, if ‘hovering’ alters the link background or several other properties.” Cleaning a Float container without Structural Map
” Most of the CSS sits in a style block in the header of this page, but where I alter the styles to demonstrate the bug I’ve put the changes in-line so they’ll be easy to find, and there are obvious comments in the source at the beginning of each example to make it even easier.” Margin Bugs
” div#floatholder (dotted border) is dimensioned horizontally by margins, and vertically by content. div#float (thick brown border) is floated left, and contains a test link. Following that are several lines of bare text, alternating with divs containing more text, plus test links. Next is a cleared div (purple border), then another div for good measure.”
“apparently IE is adding 3px of space to the end of the line boxes in this demo if they touch the float. Now cast your eyes down to the bottom of the test box. Observe how the 3px space is evident even tho the red bordered box (#jog-box) is left margined far enough to separate it from the float. This means that the added ’space’ is applied to the line boxes that are adjacent to a float, not just to ones that are touching the float.” IE6 Three Pixel Gap
“This test case demonstrates a problem with Safari 1.3 and 2.0. Using a combination of float and negative margins on an element makes any links in the element unclickable. Text also becomes very difficult to select, and if you tab through the links they disappear when they lose focus. A workaround, as demonstrated in test case 2, is to add position:relative to the CSS declaration for any floated elements with negative margins.” Float + negative margin bug in Safari
” 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. This bug is a real headbanger because there seems to be nothing triggering it. However, by now everyone should know that IE needs no excuse to misbehave.” IE Duplicate Characters Bug
“In Explorer for Windows there are two display errors. 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! Take it from me, folks, that is not kosher.” Escaping Floats Bug
Clear the floats
” 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.” Clearing a float container
“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”.” Float Tutorial
“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.” Clearing Floats
” We want the black border to go around both our floating columns. That doesn’t happen, though. The container div itself has no height, since it only contains floating elements. Therefore the border stubbornly stays at the top of the floating columns.”
” When using floats in CSS, without a doubt you have encountered the interesting effects it will have on the following content. Here I will show you different ways to clear floats without any extra mark-up.” How to clear CSS floats