Sites from Scratch

More Simple Layouts

Introduction

This article fills out our site a little more. It introduces generic text as filler, a three column layout and a method of easily changing a page's layout

Open the XHTML page and the CSS file from our last article: Simple Layout

More Simple Layouts

Our current layout looks okay, but it really needs some content to fill it out so that we can see it properly. There are a number of sites which provide generic content for just this purpose. Visit Lorem Ipsum and generate some paragraphs. Add 3 or 4 to the maincontent div, enough so that the footer is 'below the scroll' of your site

Example 1

Now add two more divs within the subcontent div, removing your placeholder text of 'Subcontent'. Call them siteinfo and links. Add a paragraph of Lorem Ipsum to each. As before, now that we have the structure, it is time to style it

In your CSS file, add two new rules under the #subcontent rule, one for each of the new divs. Give each rule a property-value pair of float: left and margin: 1%;. Set the background-color of #siteinfo to #BFE0E0 and that of #links to #E0C7E0. Your site should now look like Example 1

Next we'll add 4 more CSS rules that won't have any immediate effect, but at the end there is a neat trick to bring them all into use. First though: the class selector

Just as the hash symbol indicates that the CSS rule relates to an element with a particular id, a full stop indicates that the rule relates to an element with that class. Therefore .example {property: value;} relates to an element with a class of example

The two elements in the selector indicate the position of the relevant elements in the hierarchy of the web page, ie that rule only applies when the #content element is contained within a .threecol element. Add a .threecol #content rule to your CSS with a width of 60%.

Now add a .threecol #subcontent rule to your CSS with a width of 38%. Then add .threecol #siteinfo and .threecol #links, each with a width of 48%. Your site will remain unchanged as those rules as not yet relevant

Example 2

To make them relevant, we simply need to add a class of threecol somewhere up the XHTML hierarchy from the affected elements. The best place is probably on the body element as this kind of change affects the entire layout and, in complicated cases, there could be many other elements affected. So, change your <body> tag to <body class="threecol">. Your page should now look similar to Example 2. Again, lengths of the columns will differ depending on the amount of content in each

Okay, so let's examine that in a little more detail. The CSS code relevant to this article should look something like Figure 1

Figure 1

  1. #content {
  2. background-color: #D6DEEB;
  3. float: left;
  4. margin: 10px 0;
  5. width: 80%;
  6. }
  7.  
  8. #subcontent {
  9. background-color: #B8D0E8;
  10. float: right;
  11. margin: 10px 0;
  12. width: 18%;
  13. }
  14.  
  15. #siteinfo {
  16. background-color: #BFE0E0;
  17. float: left;
  18. margin: 1%;
  19. }
  20.  
  21. #links {
  22. background-color: #E0C7E0;
  23. float: left;
  24. margin: 1%;
  25. }
  26.  
  27. /* 3 columns */
  28. .threecol #content {
  29. width: 60%;
  30. }
  31.  
  32. .threecol #subcontent {
  33. width: 38%;
  34. }
  35.  
  36. .threecol #siteinfo {
  37. width: 48%;
  38. }
  39.  
  40. .threecol #links {
  41. width: 48%;
  42. }
  43.  
  44. Download this code: 04-fig01.txt

The first things we added were #siteinfo and #links. Those float properties were unneccessary for the two column layout we started with, but they help those elements sit neatly in the three column layout. Experiment a little by alternately removing the floats and the threecol class from the body and you will quickly see what I mean. You'll also see that the 1% margins were simply for making the layout neater, while the background colours are obviously for visibility

If, however you take a look at line 27 in Figure 1, you'll see that I added a little extra line. That is a comment. CSS comments are delimited by an alternate pair of forward slash and asterisk - /* to open and */ to close. It is always a good idea to comment your code. It adds readability if you, or someone else, looks at your code later

The other important thing you will notice about the code in Figure 1 is the widths. We reduced the content element to 60% and the subcontent element to 38%, thus preserving the 2% gap of the two column layout, but what about the other two elements? A quick assumption would be that they should have a width of approximately 19% each to fit nicely. That assumption would be reasonable if they derived their width values from the width of the page, but they don't. The cascading nature of CSS rules means that each element derives its width based on its parent element, in this case: the subcontent element. Therefore, 48% for each fits them in neatly

Your site should look like these examples, depending on whether you have the threecol class added or not: Two Columns example or Three Columns example. Next we'll add Navigation to our site