First time visitor? The tutorials start here.

A More Coherent Design, Part 2

In the last post, we changed a few colors and added some padding on our practice page, to make it look a little nicer. Now, we’re going to add padding to the main content area.

If you look at the CSS for #header, you’ll see that no width was defined for it. For this reason, it was easy to add padding to it without changing its width, because its width will naturally fill the #header’s available space (which is contained by #container), whether you add padding to #header or not.

However, looking at the CSS for #content, you’ll see that there is a specific width defined for that. When a width is defined, any padding or borders applied to it will increase its width, so we’ll have to do a little math here.

#content {
	background: #fff;
	padding: 1px 0;
	float: right;
	width: 700px;
}

The width for #content is defined at 700px, so whatever padding we add to it, we need to subtract this from 700px and redefine the width accordingly. Let’s change its left and right padding to 10px…

#content {
	background: #fff;
	padding: 1px 10px;
	float: right;
	width: 700px;
}

Save your CSS, refresh your browser, and see that #links has now been pushed below #content. Here’s why…

  • The bordered #container that contains everything is defined in the CSS to be 900px wide.
  • The sidebar (#links) is defined to be 200px wide.
  • The content (#content) area is defined to be 700px wide.
  • 200+700=900. Without padding in #links or #content, they both fit neatly side by side in the 900px wide #container.

Once we added left and right padding to #content, its width increased by 20px (700px width + 10px padding-left + 10px padding-right), making it 720px wide. Because of this, the 200px wide sidebar can no longer fit beside it, and is now forced down below it.

That said, we need to subtract that padding from the defined width, so that the new defined width + padding-left + padding-right will equal 700px.

#content {
	background: #fff;
	padding: 1px 10px;
	float: right;
	width: 680px;
}

Save, refresh, and view. Now #content is nicely padded on the left and right, and the sidebar is back where it was before.

Browser differences

For this next part, you’ll need to have practice1.htm open in both Firefox and IE, because there’s an inconsistency you need to fix. At the top of the #content area where it starts with, “Let’s stick a link here,” there is a nice margin above it in Firefox, but it’s close to the header in Internet Explorer.

As with lists, the default margin at the top and bottom of paragraphs is 1em. But in Internet Explorer, if the paragraph is the first thing inside another block-level element, there won’t be a top margin in that paragraph by default. For this reason, we have to define this margin ourselves.

You don’t have to open practice1.htm in your editor. Instead, I’ll just show you what the HTML is for that paragraph:

<p class="second">Let's stick a <a href="http://ifyoucodeittheywill.com">link</a> here, some <em>emphasized text</em> and some <strong>strongly emphasized text</strong>.</p>

As you can see, the class for that paragraph is “second”. So, find .second in your CSS, and add 1em of margin-top to it.

Try this yourself, then highlight the solution below to view it:

.second {
	text-indent: 0;
	color: #000000;
	margin-top: 1em;
}

Ah, I see we still have some left-over code there from when we used to have paragraphs indented and didn’t want that paragraph indented. Since “0” is the default for text-indent, you can take that line out.

Since the color of text inside #content is already black (which it inherits from “body” in this case), we also don’t need to redefine it here, so you can take that line out, as well.

This is how it should actually read:

.second {
	margin-top: 1em;
}

…or this, which does the same thing but takes up less space…

.second { margin-top: 1em; }

Now the main content area is not only nicely padded, but we’ve also gotten rid of some CSS that we don’t need. 🙂

Do your own thing with it

Now that you see how it’s done, feel free to play around with colors, padding, font-sizes, borders, link backgrounds, and anything else you’d like to do with these practice files. If you’d like, you can even use it as a template to build your own web pages with.

This concludes the styling portion of the guided beginner tutorials, but there will be plenty more for you to peruse in any order you wish.

While the styling portion of this series is finished, I’ve saved the first for last in the overall beginner tutorials. Why? I’ll explain that in Anatomy of an xHTML Page.

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



Comments (2)

Arnie RApril 6th, 2009 at 3:54 am

Where have you been all my life? I’m used to getting headaches from trying to work out CSS and other coding. But your smooth-flowing and easy to read instructions make it so much easier to understand. Thank you, thank you.

LesaApril 6th, 2009 at 7:34 am

Thank you for the feedback and compliments, Arnie! 🙂 I’m glad I could alleviate those headaches of yours, and hope to help you more in time to come. 🙂

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.