#container-wrap

Description

The <div> block that contains everything but the #container-wrap-wrap and the top Wikidot toolbar

Containers
Outline
Image Unavailable
Click to view in closer detail!

Details

The <div> block with the #container-wrap id contains nearly everything you see on the Wikidot page. It is itself contained by #container-wrap-wrap and doesn't contain the top navigation toolbar. This is effectively the same as #container, but its existence allows for further flexibility of CSS styling.

#container-wrap is typically used for the positioning of the content area (this includes the header, footer, main content, etc) in contrast with the <body>. It is common to pass margin, border, and background settings to this selector.

Examples

You can use this selector to pass a margin property and therefore see the <body> behind it (as well as #container-wrap-wrap). The link below leads to a page demonstrating this idea using the code below it.

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

We also used a body type selector to show how #container-wrap can be coupled with the <body> tag for a neat effect.

Try It on the CSS Zone Sandbox!

Base CSS

Not defined in Base CSS.

_c
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License