How To Design Web Page Layout With CSS
Cascading Style Sheets Content Containers Simplify Web Site Design
Sep 14, 2009
All the details of the style and layout of multiple pages are in one external file making consistent style easy to apply and maintain.
Use Containers Not Tables
Instead of using a cumbersome table structure CSS allows containers based in the <div> tag to provide structures to hold and organize the content of web pages.
With CSS the web page designer controls the width, height and position of each container. Of course, this technique also allows the division of containers into subsections by other containers.
Each <div id = “namelabel”> structure type is given a unique label, usually related to its purpose, so they become a generic structure and can be re-applied on the same page.
Mainbox Container
This is the master container for the content. Two key aspects of this container are its width and position in a browser window. Looking at our suite101 layout the mainbox floats in the center of any browser window that is wider than its fixed width. This is achieved by a setting of the margin property in the mainbox’s css specification.
margin: 0 auto ;
Some Microsoft browser versions are not fully compliant with standard HTML so a common hack is to set the text-align property to center in the body definition in the CSS file.
The mainbox width is specified in pixels and this is maintained in whatever the size of th ebrowser window. If the window is narrower then it activates a horizontal slider in the browser.
Header Container
This goes the full width of the mainbox container. The nested or child containers some of the attributes of their parent structure. In this case, by not specifying a width for the container it has the same width as the mainbox. This becomes handy for maintenance as changing the width of the mainbox automatically changes the header container width so it still fits neatly inside the mainbox container.
The height property is specified in pixels so the header container maintains the right visual proportions at the top of the pages.
Textbox Container
Typically, this is the main container for the principal contents of the page in a simple page design. The CSS property float: left; positions the container on the left side of mainbox container. The other positioning property is width:60%; and this keeps the container to 60 per cent of the width of the mainbox container. Unlike the header there is no height specified, the container extends downwards to accommodate the amount of content placed in it.
Right Column Container
This container is similar to the previous container only it is set to float; right; so it is positioned on the right side of the mainbox container. Also the width is specified as a percentage of the width of the mainbox.
The works fine while the total percentage widths of all the elements, including margins around the containers, do not exceed 100 per cent. When this happens the usual symptom is the containers lose their horizontal alignment.
Footer div
With all the containers having variable heights the footers job is to extend the mainbox container to enclose all the nested containers. This is the last container structure nested inside the mainbox container and has its key property defined in the CSS file. It is the clear attribute and it deals with which sides of the container other floating elements are not allowed
If this property set to both and the footer div does not have a width property specified it forces the main box to extend down so that the footer is below all other containers in the mainbox.
HTML Example
This is a sample basic structure for a simple page with a header and two content columns. A screen shot of this page is in the image gallery below.
<div id = “mainbox”>
<div id = “header”>
Header content
</div><! - - end header div - - >
<div id = “rightcolumn”>
Right column content
</div> <!- - end right column div -- >
<div id =”textbox”>
text box content
<br>
More text box content
</div><!- - end textbox div -- >
<div id = “footer”>
Footer content
</div><!- - end footer div - - >
</div> <! - - end main box div - - >
This is the contents of the associated CSS file.
body {
color: white;
background-color:#4e4e4e;
text-align:center; /* float in ie7*/
}
#mainbox {
width: 900px;
background-color: lightgrey;
color: black;
margin: 0 auto;
border-style:solid;
}
#header {
height: 200px;
border-style:solid;
}
#textbox{
float:left;
width:60%;
margin-left: 2%;
background-color: white;
}
#rightcolumn{
float: right;
width: 35%;
background-color: white;
}
#footer { clear: both;
background-color:#deb887;
}
Debug Tips
Using different colors for container backgrounds and applying colored borders is a good way of showing exactly where each container is when viewing the page in browser.
Note the HTML comments after each end of div tag </div>. Particularly as page layout becomes more complex it is easy to lose track them and run two structures together with messy results.
Related articles:
How to Apply Basic CSS to a Web Page
 |
