In our last post we discussed ‘seeing’ the boxes. In this post, let’s look at creating those boxes.
The beauty of CSS is the ability to place items where we want to on a page. Much of this placement is handled by using nested boxes (aka containers).
Last time we looked at this page layout.
We pointed out the four boxes in this layout.
Let’s begin by creating the box that contains all the other boxes.
Wrapper/Container
In the CSS world the ‘outside’ box is often called the wrapper or the container. The CSS for this box:
#wrapper {
width: 960px;
margin: 0 auto;
This box is 960 pixels wide and to center this box on the page we set the margin property to “0 auto”. Remember, that the content of this box will determine the height. However, when I am first creating the page layout, I will often include a a height value and a temporary background color till I get the layout I want. Then, I’ll go back and remove the height and background-color (if it was only temporary).
Header
The header area has a background-color of blue.
#header {
width: 960px;
height: 125px;
background-color:
}
Main Content
The next area includes all the area below the header.
#mainContent {
width: 960px;
}
Rightside Area
The last box for this layout is the shaded tan box on the right side.
To add the shaded box:
#rightSideBox {
width: 300px;
height: 450px;
background-color:#FC6;
margin-top: 100px;
margin-left: 650px;
margin-left: 650px;
}