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
Clearing floats
Clearing floats
Christoph M. Becker – Plugins for CMSimple_XH
Re: Clearing floats
google "css clearfix" - tons to read...
http://www.yaml.de has a good documentation online or download pdf (even in german).
http://www.yaml.de has a good documentation online or download pdf (even in german).
Re: Clearing floats
Thanks a lot! The section Containing Floats is really very interesting. I have updated my little demo accordingly and added a CSS popup for the second paragraph. The effect of "table" is exactly what I was looking for (it won't work on IE<8 where the effect is most likely as with "nothing", but that is acceptable).manu wrote:http://www.yaml.de has a good documentation online or download pdf (even in german).
Christoph M. Becker – Plugins for CMSimple_XH