Home › CSS › Creating Nested Boxes in CSS

Creating Nested Boxes in CSS

In the last post we discussed seeing the boxes in a page layout. Now let's write the CSS to create those boxes. The beauty of CSS is the ability to place elements exactly where we want them — and much of this is handled through nested containers.

The Wrapper

The outermost box — often called the wrapper or container — holds everything else:

#wrapper {
  width: 960px;
  margin: 0 auto;
}

Setting margin: 0 auto centers the wrapper horizontally in the browser window. When first building a layout, I often add a temporary background-color and fixed height to each box so I can see where everything is positioned — then remove them once the layout is confirmed.

The Header

#header {
  width: 960px;
  height: 125px;
  background-color: #336699;
}

The Main Content Area

#mainContent {
  width: 960px;
}

This box wraps everything below the header. It doesn't need a fixed height — the content inside determines its height.

The Right Side Box

#rightSideBox {
  width: 300px;
  height: 450px;
  background-color: #FC6;
  margin-top: 100px;
  margin-left: 650px;
}

This positions the sidebar using margin values to place it within the main content area. In modern CSS, Flexbox or CSS Grid is the preferred approach for multi-column layouts — they're more flexible and require less manual calculation. But understanding the nested box model is still the foundation.

Nesting in HTML

The HTML structure mirrors the CSS nesting:

<div id="wrapper">
  <div id="header">...</div>
  <div id="mainContent">
    <div id="rightSideBox">...</div>
  </div>
</div>