Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
If you want to discuss contents of this page - this is the easiest way to do it.
View and manage file attachments for this page.
A few useful tools to manage this Site.
See pages that link to and include this page.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).
Notify administrators if there is objectionable content in this page.
Something does not work as expected? Find out what you can do.
General Wikidot.com documentation and help section.
Wikidot.com Terms of Service - what you can, what you should not etc.
Wikidot.com Privacy Policy.
Can you point us to the site and page where this is happening? It should be fixable with CSS. If your site is private, you'll need to open it up (at least temporarily) for us to see what's going on.
Community Admin
The website and specific page is http://rolonline.wikidot.com/game:light or http://rolonline.wikidot.com/site:armor for the include page. Sorry if I made a bug report when it's just a personal blunder.
I can't see the source of the page, so I'm not sure exactly how you're clearing the floats, but I see clear: both; in the HTML source. If you're using inline styles with a div block, try using clear: right; instead and it will pull the 2 tables that are below side bar up in line.
If you're using the wiki syntax (~~~~) to clear the floats (which renders as clear: both;), replace the syntax with this and it should fix your problem.
If this doesn't work, please post the code for one of the pages. And be sure to let us know if this fixed your problem so we can close this issue.
Community Admin
Are you wanting me to make the content float:right as well? I want to be able to have 2 side-by-side for pictures later down the line. So the idea was a set of divs (picture in a div to the left of a table in a div), and clear the floats so that it displays right for people with larger resolutions.
The page source was much like this:
I tried replacing the ~~~~ with a clear right div and it does not prevent my left floating divs from doubling up on each other. Though it seems like a cheap workaround to make the tables float right, I wish to have them left-aligned.
I, too, have noticed this to be a problem. Apparently, if the sidebar is floating, then the clear also clears that float, and hence everything after the tildes get shoved below the sidebar. I've always avoided this nuisance by adding line breaks:
I add enough line breaks for the div object to be cleared. This can be a problem for fluid width sites, though.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
My sidebar is about 2 pages long so I can't smooth it over by taking up space. I've tested this on each of my sites by creating a page with
each time the asdf is displayed below the sidebar.
This page demonstrates what I'm talking about. The images float to the right. If I used ~~~~ after the first one, then it goes to below the side bar, which of course looks pretty bad. If you view the source, I used the underscore method in my above post to simulate the idea of clearing the image's float.
Another alternative is to use custom tables to format the page:
You can read about it here.
Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me
Ah ha, now we're getting somewhere! :) If you want to left-align your tables, add this to the page(s) you want to have them left-aligned or add just the css code to your custom css to affect your whole site. The default margins for wiki tables is margin: 0.5em auto;, which causes the centering. This will override that. Obviously, you can tweak the values to your preference.
edit: And don't forget to remove your float styles.
Community Admin
I went with putting the page content into a table and it seems to work well enough. I still feel that having clear floats being influenced by the sidebar is strange enough to be considered a bug, but thanks you two for offering solutions to my issue.
It's more of a problem with the theme itself, and is therefore dependent on the theme designer (whether it is a community member or someone from the Wikidot development team) to avoid this problem if they want to.
At least, that's the way I understand it.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
So, you're saying that if the problem persists with a "standard" wikidot theme…? I am having the same problem, and it happens with my custom theme (in which the sidebar element does not contain a "float" value) and in the "standard" wikidot themes. I tried different browsers (Opera and Chrome) and the problem persists. Seems like this is not simply a "user error".
here's a link for you:
http://allsaintslongbeach.wikidot.com/children
code:
CSS:
The Wikidot base css does float the sidebar into position, so the clear: both; syntax (~~~~) is what's pushing the content below the sidebar. You can use my clear: right; syntax in place of the "~~~~" or try Timothy's suggestions.
The other option is to totally change how the side-bar and related elements are positioned to solve this. It would take a bit more work, but it could be done.
Community Admin
It seems to me that if there is special wiki markup syntax that should be doing this, but it isn't working properly, then either the syntax should be removed (to eliminate confusion) or else the formatting should be updated to make the syntax work. For now I'll be using the "workaround", but it would be nice to see one of the fixes implemented.
P.S. Wikidot still rocks, despite this fairly minor bug! Keep up the good work guys!
Unfortunately there is no wiki syntax for clear: left; or clear: right;. Maybe that would make a good wish.
I did a bit of playing with a couple of my sites and found that if you make a small change to the side-bar CSS you can eliminate this problem without too much effort.
I learned that float has no effect on any element that is positioned absolutely and this small change did not adversely affect most of the sites I tried it on with various custom themes. On some, it screwed up the footer positioning, but that was easily fixed by setting a minimum height of the #main-content to something longer than the height of the side-bar. On others, I had to add a top:, left; or right: position to keep it lined up where it belonged.
The bottom line is that I only had to make small changes to the #side-bar and #main-content to eliminate the issue caused by a floating #side-bar element. By making the #side-bar a non-floating element, the clear floats wiki syntax will be limited to doing its work on elements that are floating inside the #main-content element only.
The Firebug plugin for Firefox makes it pretty easy to edit and change the CSS on the fly until you get things just right.
This has been a good discussion and am happy that it caused me to dig in and better understand how floating elements work.
I found a good example of a very nice theme by Timothy Foster that uses absolute positioning for the #side-bar: God's Promise Theme. I'm using this theme on a site I'm developing for a Christian-based thrift store in my area (it's still a private site while I'm working on it).
Community Admin
Brilliant! Implemented and fixed! I'll have to keep this in mind if I have a similar problem in future!
If I could +1 you or this post, I would. Fortunately you're already maxed out on karma, so my inability to boost your ranking is irrelevant.
A while ago I discovered that <~~~~ and >~~~~ are wiki syntaxes for clear left and right, respectively.
BMC Creative | RoaringApps | @brycecammo