First time visitor? The tutorials start here.

CSS for Layout – Part 1

Now that you know about divs and ids, let’s get into the real magic of CSS: layout.

From the practice files you downloaded previously, open practice1.htm in both your browser and in Crimson Editor, and open /styles/style.css in Crimson Editor.

Edit the xHTML

Now, go to where you have practice1.htm open in Crimson Editor. After this:

<body>
<!-- DO NOT EDIT ABOVE THIS LINE UNTIL I SAY SO -->

Add this:

<div id="container">
<div id="header">

Notice that it’s right after the <body> tag, which begins the actual page content area.

Then, after the first paragraph where it says:

your first test.</p>

Add this:

</div><!-- end header -->
<div id="content">

Finally, near the end, right before where it says this:

<!-- DO NOT EVER EDIT BELOW THIS LINE

Add this:

</div><!-- end content -->
<div id="links">

<ul>
   <li id="first"><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Community</a></li>
   <li id="last"><a href="#">Contact</a></li>
</ul>

</div><!-- end links -->
</div><!-- end container -->

Notice that, after the “DO NOT EVER EDIT” comment is the </body> tag, which ends the actual page content.

Now save the changes you just made, then refresh practice1.htm in your browser. You will see no difference from the way it looked before.

Edit the CSS

Now go to where you have style.css open in Crimson Editor, and let’s make that page look a little more normal. Where it says this:

body {
     font-size: 12px;
     font-family: verdana, arial, helvetica, sans-serif;
     color: #339933;
     background-color: #fffaf0;
}

Change #339933 to #000
Change #fffaf0 to #ccc

Where you see this:

h1 { color: #996600; }
h2 { color: #006699; }
h3 { color: #990099; }

Change it to this:

h1, h2, h3 { color: #777; }

What I did there was combine the three heading tags (h1, h2, h3), separated by commas, because they now all share the same attribute value (color: #777;). This can also be done with classes and ids, as long as you use the dot or number sign, respectively, to specify that you are defining a class or id.

If you think about it logically, all we’re doing is saying,
“I want this, this, this to share { these attributes }.”

Now, remove this completely:

p {
     margin:  5em;
     text-indent: 5em;     
}

Finally, where you see this:

.intro {
    font-weight: bold;
    width: 50%;
    padding: 0.5em;
    margin: 5em auto;
    border: 1px solid #cccccc;
    text-indent: 0;
    color: #000000;
    background-color: #ffff99;
}

Remove everything except the bolding so it says this:

.intro { font-weight: bold; }

Now save those changes, and refresh practice.htm in your browser.

Aside from some leftover highlighting of random words and/or phrases, you now have a plain page with a gray background, black text, dark gray headings, and a bolded first paragraph. It might be a little hard to read the text on the gray background, but that will be taken care of shortly.

Getting into the layout…

Now to see the different sections and how they behave, add this to style.css and save your changes:

#container { border: 3px solid #777; margin: 0 5em; }
#header, #links { background: #eee; }
#content { background: #fff; }

Now refresh your browser, and compare it to those last three lines you added to the CSS.

Remember when you edited practice.htm,
aside from a couple of <!-- hidden comments -->
<div id="container"> was the first thing after the <body> tag and its closing
</div> was the last thing before the closing </body> tag.

As a result, the “container” div surrounds everything else on the page: the “header”, “content”, and “links” divisions, and you can see this now because #container has a border defined for it.

Also notice how the “container” div “contains” the rest of the content, pushing it in from the sides when we gave it the 5em side margins. This doesn’t happen because we named it “container”. We named it “container” because this is the purpose we have in mind for it, and we very well could have called it “wrapper”, “outer”, or anything else that reminds us of its purpose.

Now moving on to #header and #links. We gave those divisions a light gray (#eee) background, which you can see at the top and bottom of practice.htm.

The content area has a white background, as defined by #fff.

Getting rid of the gaps

As you may have noticed, there are gaps between the header, content, and links sections. A quick and dirty solution to this is to add 1px of padding to the top and bottom of each of those sections.

Where you already have this in your CSS:

#header, #links { background: #eee; }
#content { background: #fff; }

Add padding so it now reads:

#header, #links { background: #eee; padding: 1px 0; }
#content { background: #fff; padding: 1px 0; }

Better yet, since we’re defining more than one attribute for each of them now, let’s stick a few carriage returns and some indenting in there so it’s easier to read:

#header, #links {
	background: #eee;
	padding: 1px 0;
}
#content {
	background: #fff;
	padding: 1px 0;
}

There, that looks tidier. Notice that both say the same thing, but one is easier for human eyes to read.

Save your changes and refresh your browser, and you’ll see that all the divisions are touching each other, giving your layout a nice solid look. Ok, maybe not so nice yet, but at least it’s solid.

Browser differences

If you’re like most people, you already have Internet Explorer (link will open in a new window) installed on your computer and are probably using it right now. If not, you should download and install it now.

In addition, if you don’t already have Firefox (link will open in a new window), you should download and install it now, because you will need both browsers to see that there are already differences in the way your practice page looks in each of them. So far the only noticeable difference is the size of the headings, but as we delve deeper into CSS for layout, you will find that there will be others.

Continue to CSS for Layout – Part 2…

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Comments (2)

Pastor RickMarch 21st, 2009 at 11:08 am

I know it is a tutorial but I still find it shocking that you tell people to install IE! Absolutely shocking!

LesaMarch 21st, 2009 at 11:26 am

Lol. Not teaching webmasters about the shortcomings of IE would be like not teaching police academy recruits how to handle situations involving guns. Ignoring such perils in life could bring about some rather disastrous results. 😛

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.