Description The block that contains the main section of the page including the content and side bar. Containers Contained by #container Contains: #main-content #side-bar

Outline Click to view in closer detail!

Details

This is the id of the <div> block that contains the main content and side bar. This block does not hold the footer or header but holds everything in between. This id is exceptionally useful since it can be used to make the main content and side bar (which usually occur one beside the other) appear as one block between the header and footer.

If you are not using a Wikidot side bar, this effectively becomes analogous to #main-content.

Examples

Using this selector, you can cause the middle areas to appear differently from the header and footer yet retain the "oneness" aspect. The link below leads to a page demonstrating this idea using the code below it.

• Click here to see example.

#content-wrap{
    margin: 30px 50px 30px 50px;
    border: 2px solid #00A;
    background-color:#FFF;
}
body{
    background-color: #DBB;
}

Try It on the CSS Zone Sandbox!

Base CSS

#content-wrap{
    padding:0; margin:0;
}
/* fixes the peekaboo bug in most of the themes (ie6, ie7)*/
#content-wrap {
    _height: 1%;
    min-height: 1px;
}