Containers are the building blocks of print documents and are necessary for the proper viewing and publishing of library pieces. Created properly, containers will ensure the correct placement of objects on the page and will protect objects from malformed content in other containers.
Edit me

Foundational to all document containers is the parent container which will surround all other containers. The parent container #doc-container reinforces the document dimensions and will look similar to this:

#doc-container {
    width: 8.5in;
    height: 11in;
    top: 0in;
    left: 0in;  
    position: relative;
    background-color: rgb(255, 255, 255);
    margin: 0 auto;
}

All child containers should have the following characteristics: Namespace beginning with doc-[containerName] (without the brackets)

  • Absolute positioning
  • Defined width and height
  • Overflow hidden

A typical container style will look like this:

#doc-headlineContainer {
    width: 8.5in;
    height: 1.1in;
    top: 0in;
    left: 0in;
    position: absolute;
    background-color: rgb(245, 160, 26);
    display: block;
    overflow: hidden;
    vertical-align: middle;
}
Failing to create strict containers with overflow: hidden styling could have very negative document consequences if custom content contaminates the document design.
Tags: docs