This blog is about Graphic Design, Vector Art, and Cartoon Illustration

CSS containers and how they work

A CSS container doesn't seem to do much. In fact, at first, I was inclined to skip over it. But now I've got it.

You start with a page container. This determines the width of your page, it's position and background color. If you want it to center in the page but connect with the top, you set the margins as "auto" for left and right and "0" for top.

Inside the container live the div tags. The first div tag should be the header. In the instance of this facebook page, they have made the header the entire width of the browser. If you want the header to be the same width as your container, you would set it's width and margins to match.

The div tags are linear within the container. That is, they scroll down, like a web page. All you have to do is to put them in order to create "rows".

"Columns" are much trickier. To add a "column" to a page, you insert a div tag (usually called a sidebar) within the container. It's relationship to the page is whether it's on the right or left. Once you've set its' width, you have to allow a margin for the main content div so they don't run over each other. If the sidebar is on the right, padding the right on the main content div tag won't work, because the padding is BEHIND the sidebar. To avoid the sidebar, the main content must have enough of a margin to avoid the sidebar plus a bit more to keep content from touching the edge of the sidebar.