Hello, Wikidot Community! I've found a strange issue on my site at spheres5e.wikidot.com, which isn't available for public viewing yet but is using the nice Forest theme. For organizational purposes, I want to use a forced line break (five ~ on one line) to help separate and organize the content on my main page. However, doing this is interacting very strangely with my sidebar, all of which seems to be put 'above' the line break. In short, anything more than a very small amount of content in my sidebar pushes all my other content down, and I'm pretty sure that's not how a sidebar is supposed to work. If anyone can help me isolate and resolve probable causes for this, I'd appreciate it - that sidebar is moderately important for my intended site design.
It's hard to get specific without access to your site. The issue is most likely due to the the fact that the sidebar is positioned by floating it to the left. If you are putting several tildes on a line, you are clearing floats and that is pushing your content below the sidebar. See the "Custom DIV Blocks" section of the syntax docs: http://www.wikidot.com/doc-wiki-syntax:block-formatting-elements
To force a line break, the trick is to type space, underscore, and hit enter (make sure you don't have anything, even spaces, following the underscore) like this:
Some text #1.
Some more text #1.
----
Some text #2.
_
_
_
_
Some more text #2.
Result
Some text #1.
Some more text #1.
Some text #2.
Some more text #2.
Hmm… looking at the Forest theme (linked in my original post above - that should be the relevant code), do you have any recommendations for converting the Sidebar to a fixed position so it's not floating anymore?
That can be done, but I don't recommend it. Apologies, this is going to get long-winded.
TLDR;
Your layout really isn't broken. You need to avoid using 4 or more consecutive tilde characters (~~~~) at the start of a line, which is clearing your floats. You can use 4 or more hyphens (----) at the start of a line to force a line break and create a horizontal rule. Or, you could escape the tilde characters so they are not parsed.
Explanation
Wikidot has a strict layout of elements on the page and you can't change that unless you have a Pro account and use a custom Bootstrap layout.
In simple terms, the major elements that make up a page are organized like this:
- #container
- #header
- #content-wrap
- #side-bar
- #main-content
- #footer
The side-bar and main-content are contained within the content-wrap, so it works well to float the side-bar left or right depending on your preference (or hide it completely).
The Forest theme has the width of the side-bar set at 200px. The main-content has its left margin set at 250px. If the side-bar was not set to float to the left, the elements will stack on top of each other, which will look terrible and broken.
Example (no width, margins, or floats on elements)
[[div id="content-wrap]]
[[div id="side-bar"]]
side-bar
side-bar
side-bar
side-bar
side-bar
[[/div]]
[[div id="main-content"]]
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
[[/div]]
[[/div]]
Result
side-bar
side-bar
side-bar
side-bar
side-bar
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
Setting the elements to float left and adding a margin to the main-content gives this.
Example (margins and floats added)
[[div id="content-wrap]]
[[div id="side-bar" style="width: 75px; float: left;"]]
side-bar
side-bar
side-bar
side-bar
side-bar
[[/div]]
[[div id="main-content" style="width: 250px; margin-left: 80px;"]]
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
[[/div]]
[[/div]]
Result
side-bar
side-bar
side-bar
side-bar
side-bar
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
Now, look what happens when I try to insert some tildes in my content.
Example (tildes added)
[[div id="content-wrap]]
[[div id="side-bar" style="width: 75px; float: left;"]]
side-bar
side-bar
side-bar
side-bar
side-bar
[[/div]]
[[div id="main-content" style="width: 250px; margin-left: 80px;"]]
main-content main-content
~~~~~~~~
(pushed below floats)
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
[[/div]]
[[/div]]
Result
side-bar
side-bar
side-bar
side-bar
side-bar
main-content main-content
(pushed below floats)
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
As I explained earlier, when you used multiple tildes in your content to try and force a line break, it was parsed by Wikidot to mean you wanted to clear: both; for any floating elements. This effectively forces any content outside of the the side-bar div below the side-bar. If you must use tildes, escape them like this so the parser ignores them:
Example (escaping the tildes)
[[div id="content-wrap]]
[[div id="side-bar" style="width: 75px; float: left;"]]
side-bar
side-bar
side-bar
side-bar
side-bar
[[/div]]
[[div id="main-content" style="width: 250px; margin-left: 80px;"]]
main-content main-content
@<~~~~~~~~>@
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
[[/div]]
[[/div]]
Result
side-bar
side-bar
side-bar
side-bar
side-bar
main-content main-content
~~~~~~~~
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
main-content main-content
Suggested References
I highly recommend W3Schools to use as a CSS reference. It's really organized and explains things in an easy to understand way. It helped me a ton when I was first learning how to tweak my CSS.
