Description Defines the entirety of the side bar. Containers Contained by #content-wrap

Outline Click to view in closer detail!

Details

This is the main ID selector for the Wikidot side bar. The side bar appears on most pages for the categories of which it is defined in the Site Manager. This bar usually contains either quick information or quick links for site navigation. As such, the #side-bar selector is among the most important in designing site CSS, as this will directly affect layout and how people navigate.

In general, the side bar floats left relative to the #main-content, though CSS can allow for the side bar to float to the right, as on this site.

Examples

On this page, the side bar has been given a slight background color using the CSS below.

#side-bar{    background-color: #EEF; }

Try It on the CSS Zone Sandbox!

Base CSS

#side-bar{
    float: left;
    width: 14em;
    padding: 1em;
    margin: 0 0 1em 0;
    clear: left;
 
}
#side-bar ul{
    padding: 0 0 0 2em;
    margin: 0.5em 0;
}
#side-bar div.foldable-list-container ul li ul li{
    font-size: 90%;
}