Clearing floats
Posted: Sun Aug 31, 2014 6:55 pm
Hello Community,
when working with floating elements, there's often the need to clear them so that the following elements will not float anymore. However, there is a certain layout technique which seems to be used sometimes in templates where a two column layout is created by floating only the left column, and setting a left margin for the right column. Normally, that works fine, but there may be issues when floats are cleared in the right column. To demonstrate this I have set up http://3-magi.net/demo/float-clear.html. As you can see, the second "Lorem ipsum" paragraph is pushed down below the red box on the left. This is caused by a <div style="clear"> after the first "Lorem ipsum" paragraph. One way to avoid this undesired behavior is to establish a block formatting context for the green box, what can be done by setting overflow:hidden for this box; simply press the button (requires JavaScript) to see the result.
So it seems to be a good idea to establish a block formatting context for boxes where floats are cleared. However, overflow:hidden may have undesired side-effects. For instance, CSS pop-ups which don't fit in the box will be chopped.
Has anybody a general solution for this issue? Or shall we deprecate this particular layout technique for templates?
Christoph
when working with floating elements, there's often the need to clear them so that the following elements will not float anymore. However, there is a certain layout technique which seems to be used sometimes in templates where a two column layout is created by floating only the left column, and setting a left margin for the right column. Normally, that works fine, but there may be issues when floats are cleared in the right column. To demonstrate this I have set up http://3-magi.net/demo/float-clear.html. As you can see, the second "Lorem ipsum" paragraph is pushed down below the red box on the left. This is caused by a <div style="clear"> after the first "Lorem ipsum" paragraph. One way to avoid this undesired behavior is to establish a block formatting context for the green box, what can be done by setting overflow:hidden for this box; simply press the button (requires JavaScript) to see the result.
So it seems to be a good idea to establish a block formatting context for boxes where floats are cleared. However, overflow:hidden may have undesired side-effects. For instance, CSS pop-ups which don't fit in the box will be chopped.
Has anybody a general solution for this issue? Or shall we deprecate this particular layout technique for templates?
Christoph