Forum Moderators: not2easy
At the same time, it's common practice for members to create 'reference posts' on specific topics; generic explanations of common CSS tricks and/or theories that pre-emptively answer some of the more common questions. I hope I'm not being too presumptious in starting such a thread, myself.
Every week there are numerous questions in the forum about the use, practice, properties, and performance of the float property. It's one of CSS's trickier concepts, but it's also an extremely powerful layout tool if used properly. I thought it might be handy to start a 'dumping ground' for our float knowledge. I'm hoping we can group these topics by question so that a user searching WebmasterWorld might find an answer more readily...
Float basics: Floats and Document Flow: Floats and the Source Code: Multiple Floats (diff. directions): html: css: Multiple Floats (same direction): Containing Floats: Float VS Abs.Pos.: That's all I've got for now. I'm really looking forward to any additions you might make. And thanks for letting me play 'thread starter'!
What does 'float' mean?
How does floating work?
What are some basic things I need to know about using floats?
To start, here's the basic low down on what floats are for and how they work.
Float is a property that applies to block level elements. It's possible values include left, right and none. 'Middle' and 'center' are not vallid float values.
When float is applied to an element, that element is placed in the document flow at it's source code location, and is then lifted out and moved in it's float direction until it either (a) hits the edge of it's containing block, or (b) hits the edge of another float.
ALWAYS apply a width value to an element with a float value. ALWAYS.
Are floats part of the document flow?
What happens to elements underneath (on the Z-axis) of a floated object?
Although floats are removed from the document flow, they still interact in limited ways with normally flowed elements (unlike absolutely positioned elements which do not interact at all). Namely, floated elements do not allow the content of elements beneath them to be hidden from view. Floating an element over, say, a <p> element, does not hide the text in the paragraph, but instead moves the text over until it is free of the floated element, effectively wrapping that text around the contour of the float.
Does it matter where I put a floated element in the source code?
Why is my floated element appearing underneath (on the Y-axis) other elements instead of floating next to them?
Floated elements are first placed on a page in their source location, and are subsequently lifted out and moved horizontally. For this reason, the source location of a floated object is very important.
If you have two elements - one of them floated, the other to be floated next to - the float must come first in the source code in order to have those two elements appear side-by-side on the page.
Can I float two elements side-by-side?
Why won't a left floated element and a right floated element appear side-by-side?
One way to get two elements to appear side-by-side on the page is to float both elements. While this is probably not the ideal way to accomplish this, floats are perfectly capable of placing elements next to one another.
There is a danger, however. Two elements, on right floated and the other left floated, will only appear side-by-side if there is enough room in the containing block to accomodate the width of both floats. If there is ever NOT enough room, the float that comes SECOND in the source will be pushed down until it has enough room. The result is vertically stacked elements.
If you float two elements and want them side-by-side, you MUST use pixel widths to specify the width of the containing block. This ensures that browser resizes and screen resolutions wil not affect the layout of the page. You also must be certain that the width of the container is slightly larger than the combined width of both floats.
That said, it's usually better practice (and more stable) to use one floated object, and leave the other object in the flow. Apply a margin equal to the width of the float to the non-floated object to create a columned appearance...
<div id="float"></div>
<div id="nofloat"></div>
#float{
float:left;
width: 100px;
}
#nofloat{
margin-left: 100px;
}
I want to float a bunch of elements in a row, but the last few end up underneath the first few. Why won't they stay on the line?
I floated a bunch of images in a row, but they're stacking vertically, instead. Why?
As mentioned above, floats lift out of the flow and move in their float direction until they hit the edge of their container OR the edge of another float. This means you can float a bunch of elements, one after the other, in the same direction and they will line up like good little boys and girls across the top line box of their container.
However, floats are also effected by the width of their containing block. Anytime a float is placed, but there is not enough room for it, the float moves DOWN (along the y-axis) until it has room to float. It THEN moves in it's float direction until it reaches an edge mentioned above.
So left floating 100px wide images in a 510px wide box will line up 5 images. The remaining 10px isn't enough room for another image, so image #6 gets moved down to below the images' bottom borders, than floats left to the edge of the container, placing image 6 underneath image 1.
If you care about the precise placement of those images/objects (if 6 cannot be underneath 1, for instance) then you need to control (a) the width of the container and/or (b) the number of floats in any given 'row.' (Use <div>s like table-rows and place only the desired number of elements in each <div>.)
I have two elements inside of a container, but the container is not stretching to the full height of the elements. Why? What can I do?
My container has a border and/or background. Why isn't it showing up on the page?
My container's background/border shows up in IE but not in FireFox? What gives?
This is the float question I've seen the most in this forum, although most people asking it don't realize that it's a float question at all.
In most instances where a container is not growing to the same size as it's content, it's because the content in the container is floated. You have to remember that floats are removed from the flow, and therefore do not have any effect on the size of their container. So a container <div> with only floated children will not, itself, have any height at all. Alternately, a <div> with a floated child and a non-floated child will match only the height of the non-floated child, even if the floated child is taller.
Most people want a way to make the container stretch and contain the floated children. This is easy: simply apply a float value to the container, itself. This forces the container to stretch and contain the child element.
Much of the confusion on this question stems from the fact that it appears to only happen in the Firefox/Mozilla/Netscape browsers. This is because IE and Opera automatically enclose floats, meaning they do what applying a float value to the container does, automatically. This behavior, while ostensibly helpful, is actually a violation of the float specs, and causes more confusion than assistance to people designing a layout with floats.
The bottom line is this: float the container and you get cross-browser, float-enclosing consistency.
Is floating better than absolute positioning?
I think this is probably a matter of opinion. Here's mine: floating is better. To me, absolute positioning is a nightmare of precise pixel locations, but LOTS of REALLY GOOD designers use abs. pos. to great effect. My feeling is: use the one you're more comfortable with, the one you feel you can control. For me, that's floats. For you, it might be abs. pos.
It's probably worth noting (since someone else will if I don't), that abs. pos. is far more reliable cross-browser. Floats are implemented somewhat differently in different browsers, and you have to know what each browser will do in order to ensure consistency (see above for one example). However, I don't think they're quite as unstable as some folks seem to believe, unless you're talking about IE5/Mac, which is so float unfriendly it's almost a civil rights violation.
The only thing I can think of to add is comcerning your example of having several floats which might "wrap" to the next line. You don't mention the height of the floats. If all of the floats aren't equal in height, and one "sticks out" below the others, the floats that wrap could get stuck butting up against the protruding float, and not floating fully back to the left (ot right). So in your example image 6 could end up under image 3 or 4 possibly. That can cause a logjam of sorts, and really mess up your layout.
the floats that wrap could get stuck butting up against the protruding float, and not floating fully back to the left (ot right). So in your example image 6 could end up under image 3 or 4 possibly. That can cause a logjam of sorts, and really mess up your layout.
That's a great point, photon, and one you absolutely HAVE to make allowances for if you're floating multiple elements of different heights. One way I know of to prevent that sort of 'logjam' (great descriptor, by the way) is to control the number of floated elements on each 'line' by creating <div> rows that contain the floats.
Here [positioniseverything.net] is a great visual (@PIE) that demonstrates just the thing photon is talking about. Scroll down slightly more than halfway to the rows of light green boxes.
