To allow more flexible layout options with the editor, option buttons and page info appearing right below page content, not pushed down below the bottom of the side-bar.
Currently, there are three elements that in the base CSS have "clear:both" attributes: #page-tags, #page-info-break and #page-info. This means that the page info, options and the editor are all pushed below the end of the side-bar.
If these attributes are overridden, then the page info, options and editor jump up to the end of the page content, but leave a possibly unsightly gap of page background where they were.
If there was an empty div after the action-area, we could set that to be "clear:both" in the same way that #page-info-break is now. So the page-info, options and editor would be directly below the page content, but the page content background would be continued down the page to the bottom of the side-bar.
I think I know what you need.
This would be a template of such thing:
Wikidot themes have some background set on #div-with-background that also takes side bar into account. Side bar is float: left or right, so the background really ends when #last-element ends (if it is clear: both it ends below the sidebar).
You can achieve the same behavior without having additional "fake" #last-element. Just set overflow: hidden on #div-with-background and not set any height on it. This way #div-with-background will expand as much to cover all (even float) elements that are inside it. This is what CSS specs say and what browsers do.
Piotr Gabryjeluk
visit my blog
It doesn't work. #div-with-backgroud AKA #content-wrap may expand, but main-content does not.
The layout is a little different to your template:
The problem: http://soronlin-test.wikidot.com/contact
With "clear: none" showing unwanted gap: http://soronlin-test.wikidot.com/contact2
What I want (except the options buttons should move up too): http://soronlin-test.wikidot.com/contact3
What you suggest: http://soronlin-test.wikidot.com/contact4