Clearing floats

Discussions and requests related to new CMSimple features, plugins, templates etc. and how to develop.
Please don't ask for support at this forums!
Post Reply
cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Clearing floats

Post by cmb » 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
Christoph M. Becker – Plugins for CMSimple_XH

manu
Posts: 1085
Joined: Wed Jun 04, 2008 12:05 pm
Location: St. Gallen - Schweiz
Contact:

Re: Clearing floats

Post by manu » Mon Sep 01, 2014 12:48 pm

google "css clearfix" - tons to read...
http://www.yaml.de has a good documentation online or download pdf (even in german).

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Clearing floats

Post by cmb » Mon Sep 01, 2014 9:39 pm

manu wrote:http://www.yaml.de has a good documentation online or download pdf (even in german).
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).
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply