Esotropiart

A couple days ago I found a trick to overcome an annoying CSS behavior that had been irking me. With CSS it is possible to float an object inside a container. I generally don't like floating objects because it is hard to concretely control how the object is placed. An object can be assigned an attribute of float:right or float:left. A float:left attribute will cause an object to snap to the top left of the container element in which it is placed. If you float an image inside a block of text, the text will automatically wrap around the image. This paragraph contains an example of a right floating image.

If multiple elements are assigned a float attribute, and they are within the same container, they will generally float to the right or left of each other until they reach the width limit of the container they are in. When the combined width of the floating elements overflows the width of their container, the right-most or left-most elements will start wrapping below the others. The concept is exactly the same as how left or right justified text wraps inside a box. These bunch-o images are an example of this wrapping behavior. Shrink (resize) your browser window horizontally until the small images below start wrapping underneath each other (unless you have supreme-o resolution, they will already be wrapping).

There is a whole lot more to floating and wrapping than I have described here. I just defined the most basic concepts so I can go on to talk about the specific problem I was having.

There is an apparent oversight in how floating elements interact with the bottom of a container as they approach it. I think most people would expect and desire the floating images to actually be contained within the container they specify. That would be nice but it's not the way things work, at least not in all browsers. Generally, if you have some floating elements near the bottom of a container, like in a table cell or div, some of the floating elements will go outside the lines (boundaries of the container).

A good example of this can be seen in this blog situation. The blog entry you are reading here is currently composed of text and floating images contained in a table cell. Generally, I put any floating images inside a paragraph of text, so the images will appear floating to the left or right of that paragraph. Unfortunately, however, floating elements do not expand their containers. It's more like the floats don't really exist; they just create holes that other elements wrap around. So if you put a floating image too close to the bottom of a blog entry here, it will actually overlap the title bar of the blog entry beneath. Now this can be avoided if the images are put high enough in the text that the bottom of the image does not sink below the bottom of the text (or make your images really, really small) - but what a pain that is! What if someone has their screen resolution set to 1600x1200, and all your nice paragraphs become really long one-liners? Well, then your image will most likely sink below the text and overlap something underneath.

I don't really understand why floating behavior was designed or implemented in this way. In most situations I encounter, I would love if the floating image just stretched its container so the container actually contained the image. Seems like common sense to me.

Well, anyway, I did find a pretty simple fix on the internet. You just have to put an empty element inside, on the bottom of your container (in this case, at the bottom of my table cell, after all the floating images) with a clear:both; CSS attribute set. The clear attribute makes sure that no other floating elements will occupy the same line as the cleared element. It's basically like making the empty element a paragraph or block that fills 100% of the width of the container, allowing no neighbors to the right or left. This, therefore, forces a space below the floating images, which is occupied by the empty element. It's not ideal or intuitive (and shouldn't be necessary in my opinion), but it works. Bingo (Shazam) - now I don't have to put all the images near the top of my blog entries!