Formatting your page to work with SideBar


by vietmusic on 05-06-06


If your work is pretty text heavy, then the SideBar probably never bothers you. Indeed, it's probably quite helpful. However, if your page is design-oriented, and you have tables and divs and whatnot running every which way, then it can wreak havoc on your design.


Solution 1: Get rid of it completely


You can just create a wiki that has no SideBar if you don't have much use for it and want to get rid of it. Or if you only need it on some pages, consider this trick: vietmusic_RemoveSideBar, which allows you to take the SideBar off pages where it's unneeded.


Solution 2: Work around it.


You can make sure the first part of your page uses no complex formatting, and then plan all of the formatting for after the SideBar. For example, my frontpage might begin with a text introduction with little to no formatting. Then, after the SideBar is done, I do the formatted material.


To make sure you get past the SideBar, use <div style="clear:both"></div>.


The other solution basically pretends that the last column of the page is unuseable, and you design with that in mind. Your working area then becomes just the zone from the left of the screen to the left margin of the SideBar. You do this with this code:


<div style="margin-right:220px">
The rest of my page here.


The style code can be spruced up with borders and stuff, but I'll leave that to another tip.


Solution 3: Work with it.


You can take the idea above one step further, making the SideBar longer and contain more things. Or, you can have more SideBar-like boxes underneath the SideBar. See the FrontPage for this implementation at work, and go to Make More SideBars to see how to do it yourself.