First time visitor? The tutorials start here.

CSS for Layout – Part 2

Continuing from part 1 of CSS for Layout

Check for browser differences

Open practice1.htm in IE, if it’s not already. While that’s open, also open it in Firefox (right-click on file and choose “open with”). Now look at all those page headings. You may notice that they are all larger in one browser than they are in the other.

To fix that, all that’s needed is a little CSS. If it’s not already open, open /styles/style.css in Crimson Editor. Notice that you already have headings defined there, so you’ll want to place your other heading CSS somewhere near that to keep things nice and tidy. Since you don’t want all of your level-1 headings to be the same size as level-2 and level 3 headings, you’ll need to define their sizes individually.

I generally like to put groupings before individually-defined classes because it stays with the “cascading” theme of generalized first, then more specific afterward.

To demonstrate what I mean, I’m including the line you already have below, followed by the three lines that you need to add. Don’t add what’s already there. Only add the three new lines below the one that’s already there…

h1, h2, h3 { color: #777; }
h1 { font-size: 180%; }
h2 { font-size: 150%; }
h3 { font-size: 120%; }

You can define whatever sizes you want, but this will make their sizes consistent in all browsers. Save your CSS file, then refresh practice1.htm in both of your browsers to see that they are now consistent.

While defining font sizes doesn’t have much to do with layout, I wanted to show you how things can be displayed differently in multiple browsers, and hopefully get you into the habit right away of checking for these differences.

Now for layout…

Page width

Where you have practice1.htm open in either of your two browsers, place your cursor at the right edge of your browser until you see a two-ended arrow that points both left and right. Now, hold down your left mouse button and drag it toward the left, to make that browser window smaller.

As you are resizing your browser window, notice the distance between the edge of your browser and the border that encloses all of your content. While the content areas get narrower, the distance between the content and the edge of your browser stays the same. That is because we didn’t define a width for the content, but we did define a set margin width for it here in the CSS:

#container { border: 3px solid #777; margin: 0 5em; }

For an explanation of how margins are defined, read CSS margin and padding attributes, then click the “back” button on your browser to return to this page.

Fluid width

Now go back to this line in your CSS:

#container { border: 3px solid #777; margin: 0 5em; }

Change it to this, and pay close attention to what you are changing and adding:

#container { border: 3px solid #777; margin: 0; width: 50%; }

Assuming you saved that change to your CSS and then refreshed your browser to see those changes, the content now takes up the left half of your window, while the right half is blank. Now resize that browser window to make it extremely narrow. That’s right, the content still takes up half, and the other half is still empty. Now put your browser back to its normal size.

Go into your CSS and change the #container’s left and right margins to auto, keeping the top and bottom margins at 0. See if you can do this on your own before reading any further.

If you changed margin: 0; to margin: 0 auto; good on ya! 🙂

Save changes, refresh your browser, and voila! Your content is now centered on the page again.

Two kinds of fixed width

You can give your page (or elements within it, for that matter) a fixed width that depends on font-size, or you can have a fixed width that is not dependent on font-size. First, the kind that’s dependent on font-size, “em” (remember the capital letter M?).

em

In your CSS file, change the width of #container from 50% to 80em. Save changes, refresh your browser, resize your browser, and watch what happens as you’re resizing. Yes, the content area is now a fixed (unchanging) width, and the margins change to accommodate that width. If you make your window narrow enough, the page becomes too wide for the window and a horizontal scrollbar appears at the bottom of your browser.

Now, where you have practice1.htm open in Firefox, refresh that page if it’s not the browser you’ve been using throughout these demonstrations. In the toolbar at the top (where it says File Edit View …) click on View, then Zoom, and look at where it says “Zoom Text Only.” If you don’t see a checkmark next to “Zoom Text Only,” click on it.

To increase the size of the text on your screen, hold down the “Ctrl” key on your keyboard and press the “+” key. I could say “=” since you don’t need to hold your shift key down, but “+” will enlarge the text on your screen. Likewise, holding “Ctrl” down and pressing the “-” key will decrease the size of the text. Watch what happens to the width of your content area as you click Ctrl(+) or Ctrl(-). Since the width of this area was defined in “em”, the width of the content area becomes larger or smaller, depending on the size of the text.

px

Go into your CSS and change “80em” to “900px”. Save the css file, refresh Firefox, and re-size your text with Ctrl(+) and Ctrl(-). The width of the content area doesn’t change, because defining it in px makes it independent of font-size.

Before wrapping up this post, a sneak peek into layout tutorials to come…

Floating elements

Remember the structure of your xHTML page. You have a div we named “container” to contain everything, with a “header”, “content”, and “links” divisions all inside that container. Let’s float the “content” over to bring the “links” up beside it.

Where you have this in your CSS:

#content { background: #fff; padding: 1px 0; }

We’re going to add float: left; so it reads:

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

Save changes, then refresh the page in both Firefox and Internet Explorer.

Wow, that’s a mess. Look at how the bullets in the list of links overlap the content in Firefox, but the bullets are hidden by the content in Internet Explorer. To fix this, let’s add a left margin to the “links” div that’s the same width as the “content” div. To make the CSS easier to read, let’s also put each attribute for #content on its own line…

#content {
	background: #fff;
	padding: 1px 0;
	float: left;
	width: 700px;
}
#links {
	margin-left: 700px;
}

Also notice how #container’s border wraps all the way around the content in Internet Explorer, but stops at the bottom of the links in Firefox. That’s one of the major differences between browsers, and this next tutorial will show you how to get around that by “clearing” the float.

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



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.