tag comes in really handy. Consider this somewhat more complex example from the file threecolumnexample.htm Multi-column Example site
Example Page Title
A short demonstration of div tags
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Saylor URL: www.saylor.org/PRDV251#4.3
The Saylor Foundation
Saylor.org Page 5 of 11
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Contributors
- Adam Smith
- Richard Rorty
- Emma Goldman
- Milton Friedman
- Rosa Luxemburg
- Friedrich Hayek
- Michel Foucault
This example shows how the content for a header, three columns of content, and a footer can be contained within meaningful divisions. Note that in many cases you can just drop your content directly into a template like this one; if you need additional or fewer
s, just add them! That said, take a look at the different ways that sites in the CSS Zen Garden, the demo provided as an example with the Google Code Academy videos, and the site described in Russ Weakley’s tutorial “Two columns with Color” on MaxDesign.com approach the problem of organizing content: often, there are many solutions to a coding problem. The best way to evaluate your success is to ask whether the code is simple, readable, and requires a minimum of CSS to achieve the design that you desire.
Styling a more complex website From here, the logical question is: how do I create the presentational markup that transforms this HTML code into a functioning multi-column website? The answer is that there are many ways to approach this; we’ll look closely at one solution here. Let us emphasize that looking at example CSS from the CSS Zen Garden, from the Google Code Academy, Russ Weakley’s “Two Columns with Color” on MaxDesign.com, and from your favorite sites on the web is a very good idea, however, as studying different design techniques and approaches will help you appreciate the advantages and disadvantages to the various different solutions to this common problem. Please find the following example code segments assembled together into a functional CSS file named threecolumnexample.css. When creating a Cascading Style Sheet for a more complex site, it is usually a good idea to style the outermost elements of your HTML hierarchy first. This will reduce redundancy and also helps you keep the Box-Element Model in view as you think
Saylor URL: www.saylor.org/PRDV251#4.3
The Saylor Foundation
Saylor.org Page 7 of 11
through subsequent styles you would like to apply to the elements nested inside these outermost elements. Generally speaking, the outermost element is a body element. You will want to set any properties that are shared by all of the elements of your page first, as they will cascade down onto the inner elements. Note that we are again setting a bright red color as the background for the body so that you can clearly see the part it plays in the overall design. body { font-family: serif; line-height:18px; font-size:12px; margin: 0; padding: 0; background-color: #FF0000; } The next step is to apply styles to the next outermost element: the
with id=”container”. The key style here is “position”. Try different settings for this style rule (like “absolute”) to see if they make a difference. Note that this example sets a light green color as the background for the container. Later you will see that there are no background colors specified for the right or left columns, causing this color to be visible in the background of both. #container { margin: 0 auto; width:750px; background-color: #C9F76F; position:relative; } Once you have styled the body and the container, it is time to think about how to make all of the parts fit into a pleasing design. First, let’s apply style rules to the banner. Usually, you will want to use images, fancy fonts, or some other eye-catching elements in the banner; here, we’re just establishing
Saylor URL: www.saylor.org/PRDV251#4.3
The Saylor Foundation
Saylor.org Page 8 of 11
one way to undertake applying basic style settings to an HTML file, so we’ll leave tweaking the design to you: #banner { height: 200 px; background-color: #009999; } Note that banner height can be changed without covering the content below. This is because the left column (the div with id=”nav”) uses the “clear: both;” style to begin the three-column layout below the banner, but still inside the container. Also note that the banner element is set to a dark blue color. While this is not the most pleasing color choice, the reason for coloring it boldly here is to make sure that you can correctly identify it. On all but the most minimal websites, banners will use an image or logo instead of a solid color. Now that we have the banner in place, it is time to start placing the columns. Let’s style the left column first: #nav { clear: both; width: 175px; float: left; } Later, you might want to return to the nav column to create a more beautiful list of links using the skills for formatting menus that you have already mastered. For now, observe closely how each of these style rules works. As we’ve just mentioned, the clear style rule ensures that the left nav column begins below the banner. What happens if you leave the clear style rule out of this segment? If you can’t guess, try it out. The float style rule pushes this element all the way to the left of the container we put it in. What happens if you set the float style rule to right? The width style is relatively self-explanatory, but it is important to note that 175px for the
Saylor URL: www.saylor.org/PRDV251#4.3
The Saylor Foundation
Saylor.org Page 9 of 11
left nav column, plus 400px for the center content column, plus 175px for the right contributors column adds up to the 750px we specified for the container. Now, let’s style the center column: #content { width: 400px; float: left; background-color: #5CCCCC; } Again, we have used the float style rule to push the left hand edge of the content column hard up against the nav column. Note that the background-color specified here is a lighter blue color. We are now ready to style the right column: #contributors { width: 175px; float: left; } For our third column, we again used the float style rule to push the left hand edge of the contributors column hard up against the content column. Again, what happens if you set the float style rule to right? What happens if you leave it out completely? So the last major element is the footer, which we want to appear below these columns: #footer { clear: both; background-color: #099999; } Here we’ve used the clear style rule to make sure that the footer appears below all three of the columns we have already positioned. This is the same technique we used to make sure the three-column layout for the content appeared below the banner. It is also the same technique you would want to use if you were stacking several banner- or
Saylor URL: www.saylor.org/PRDV251#4.3
The Saylor Foundation
Saylor.org Page 10 of 11
footer-like elements -- if you wanted, for instance, to include a horizontal menu in addition to the vertical link list that we already created. At this point, we are basically done. Even so, we can easily make our design somewhat more appealing. For the purposes of making the smallest elements have some whitespace around them, let’s apply 10px of padding. This is something you’ll need to experiment with -- or grid out on graph paper. Sometimes you may want more or less padding around some elements: h1, h2, h3, p, ul, li { margin: 0; padding: 10px; } Finally, the bullets provided by the the default styles for lists are not making our design more clear, visually pleasing, or easy to read, so let’s get rid of them. li { list-style: none; }
That’s it! Try experimenting with adding style rules and elements to this basic framework. See if you can figure out how to create two-column layouts based on this example. See if you can find other ways to create a three-column layout -- looking at existing sites on the web is definitely not cheating! And, remember that there are countless free CSS templates available online from which you can learn new design techniques. As you move towards an intermediate skill level with HTML and CSS, learning to harvest skills, techniques, approaches, and information from the web will be essential to your progress.
Saylor URL: www.saylor.org/PRDV251#4.3
The Saylor Foundation
Saylor.org Page 11 of 11
