Head Scratching Floats
I feel I’m moving on in leaps and bounds with CSS recently but there’s one area that I’m having to really get my head around, “floated elements”. When you float an element, like a heading, paragraph, list or div, it becomes a block container. This container can then be shifted left or right of the current line by using the markup “float: left” or “float:right”. Other content can then flow down the right hand side of a float-left box and the left hand side of a float-right box. You always need to set a width for your floated element, if you don’t set a width then you can get some unpredictable outcomes.
It also took me a while to get straight in my mind that, for example, you may have floated a containing element to the right but all of the contents of that element will still have normal document flow within that container. So if you want the contents of the container also to float right then you would also need to apply that syntax to that element as well. Sounds easy, right?
Another problem with floating elements is that the parent element does not recognize its child’s height. This means that the parent will lose its height if it only get its height from the height of its child. When this happened to me for the first time it had me scratching my head for a while. The answer is to apply the mark up “overflow:hidden” to the parent element. The parent element will then recognize the height of its child and all will look great. Got it? I did have to wash, rinse and repeat this one a few times to make it stick.