Sites from Scratch

A Simple Layout

Introduction

This article introduces basic CSS layout

Open the XHTML page and the CSS file from our previous article: Text Tags

Simple Layout

Example 1

CSS-P commonly uses div elements to lay out a page. They are used as containing blocks for other elements. They can be positioned and styled in a number of ways. We'll start our use of divs with a typical basic layout consisting of a header, a navbar, two columns (main content and subcontent) and a footer. Upon completion, it should look similar to Example 1

To create our layout, we add our <div> tags to our XHTML file. Our first div element should enclose all the current content, so the opening tag (<div>) should go just after the <body> tag and the closing tag (</div>) should go just before the </body> tag. Then we want to give that div a unique identifier by using the XHTML attribute, id. We'll call this first one page. To add it edit your <div> tag so that it looks like this : <div id="page">

The quotation marks are important, as is the case used. XHTML is case sensitive, so page is different to Page or pAge. It is easiest to make all XHTML code lowercase as a matter of course, that way you can avoid making errors by forgetting which case you used

Now we need to add 5 more divs inside the page div. Add <div id="header">Header</div> and <div id="nav">Nav</div> immediately after the start of the page element. Each div should be spread across 3 lines with the middle line indented for readability. Then wrap the headings and the paragraph in a div labelled content. After that we need two more divs, one for the subcontent and one for the footer. Once you are finished your XHTML file should look like Figure 1

Figure 1

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD
    XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/
    xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">
  5.  
  6. <head>
  7. <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
  8. <meta name="author" content="Lachlan Hardy"
    />
  9. <meta name="created" content="01/01/04"
    />
  10.  
  11. <title>First Website of Lachlan Hardy
    </title>
  12.  
  13. <link rel="stylesheet" type="text/css"
    media="screen" href="css/main.css" />
  14. </head>
  15.  
  16. <body>
  17. <div id="page">
  18. <div id="header">
  19. Header
  20. </div>
  21. <div id="nav">
  22. Nav
  23. </div>
  24. <div id="content">
  25. <h1>Heading 1</h1>
  26. <h2>Heading 2</h2>
  27. <h3>Heading 3</h3>
  28. <h4>Heading 4</h4>
  29. <h5>Heading 5</h5>
  30. <h6>Heading 6</h6>
  31. <p>This is a paragraph</p>
  32. </div>
  33. <div id="subcontent">
  34. Subcontent
  35. </div>
  36. <div id="footer">
  37. Footer
  38. </div>
  39. </div>
  40. </body>
  41.  
  42. </html>
  43. Download this code: 03-fig01.txt

If you look at your page in a browser now, it won't look like much. The page still needs to be styled. The first thing we need to do is remove the colour rules we added to the body element in the previous article. Then we'll centre our layout

Do this by adding a #page selector with an property-value pair of margin: 0 auto;. The hash symbol before the page tells the browser that it refers to an element with an id of page. The margin property can receive a number of values, up to 4. One for each side of the element affected. The rule of margin: 0 auto; is shorthand. It means that the margins at top and bottom will have a value of zero, while the margins at left and right will be given an automatic value. The automatic values will become apparent shortly, but in order to see what is happening we need to add a few more properties.

Make a CSS rule for the header element by using #header. It should include a background-color property with a value of #E3EBE0. This will give our header a coloured background, just like in Example 1. The other property we need is a width property on the #page selector. Give it a value of 90%. Now you can see how the margin value of auto affects the page element. The page element only takes up 90% of the width of the browser window and the browser automatically determines a value for the left and right margins to equalise the element in the centre of the web page

Our next step is to style our header element. Add a height property with the value of 100px. The 'px' stands for pixels, a common measurement unit in web design. There are a number of other units that we could use. These will be covered in detail later

Now add a margin property. We wish to affect the top and bottom margins, while leaving the left and right. So we use a value of 10px 0;. Note that when you use a zero in CSS you are not required to indicate the unit of measurement, but any other value requires a unit to be specified

Your header should now stand out from the other content as per Example 1

Next we treat the nav element in a similar fashion to the header. Give it the same margins but make the height 30 pixels and the background colour #EAEBC1

Give the content element a background colour of #D6DEEB and a width of 80%. Give the subcontent element a background colour of #B8D0E8 and a width of 18%. Give each the same margins as the nav element

Now the two elements are the right width to sit next to each other and still fit into our layout correctly. To make them do that we need to use an property called float. Give the float property of #content a value of left and that of #subcontent the value of right. Now they sit correctly but you'll notice that the footer element has followed the subcontent up to the right

This is because of the way the document flows. The document flow is the order of the elements in the XHTML file. Each immediately follows the other. Floating the content and subcontent elements removes them from the proper document flow. Therefore we need to style the footer appropriately so that it returns the document to its normal flow from that point

We do this by adding a clear property to the footer. Clear has four possible values: left, right, both and none. Using it ensures that the element affected will not allow a float on the side indicated, hence 'clearing' it. Add clear: both; to the footer element and view your page in the browser

Now add a background colour of #D6CDE8 and the same margins as before

Your layout should be complete and look (excluding the text) the same as Example 1. The major difference will be in the size of the elements. You'll note that the content element is only as tall as the content within it allows. It may need more content to fill the whole page

Your CSS code should look like Figure 2

Figure 2

  1. body {
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. #page {
  7. margin: 0 auto;
  8. width: 90%;
  9. }
  10. #header {
  11. background-color: #E3EBE0;
  12. height: 100px;
  13. margin: 10px 0;
  14. }
  15.  
  16. #nav {
  17. background-color: #EAEBC1;
  18. height: 30px;
  19. margin: 10px 0;
  20. }
  21.  
  22. #content {
  23. background-color: #D6DEEB;
  24. float: left;
  25. margin: 10px 0;
  26. width: 80%;
  27. }
  28.  
  29. #subcontent {
  30. background-color: #B8D0E8;
  31. float: right;
  32. margin: 10px 0;
  33. width: 18%;
  34. }
  35.  
  36. #footer {
  37. background-color: #D6CDE8;
  38. clear: both;
  39. margin: 10px 0;
  40. }
  41. Download this code: 03-fig02.txt

Your site should look like this example. Next we'll create some More Simple Layouts for our site