1) This design consists of the following containers:

container
header
menu
content
footer

Content is subdivided into left content and right content. This layout is fixed in width and centered. Each of the containers will be positioned as follows:

container - inline, centered on the page
header - inline
menu - inline
content - inline with left_content: float left and right_content: float right
footer - inline, with clear: both to clear any floated items above.

2) By using the colored box method, each container will be given a unique background color. It is easier for us to distinguish the width and position of each container and to see how the containers interact. Before any content is in place, coloring, positioning and sizing of each container can be adjusted in order to fit our preferences.

Here, centering the position of the main container with fixed width first, then giving the position and width of the header, menu, content, footer and so on... The content is further divided into left and right content to make it a two-column layout.

3) This is the last step to drop in content when the containers have been positioned correctly and render correctly across all target browsers. It obviously shows an unstyled or semi-styled layout, so more touch-up is necessary to style the page.