Where are we?

We have a design, and we’re all set to start changing it. Let’s begin with layout, since that’s often the hardest thing to get right.

This lesson’s goals

By the end of this lesson, you should:

• Remember that layout is the hardest part of CSS.
• Understand that you need to move slowly and carefully when making layout changes.
• Know that sometimes it helps to change the names of page elements.

Here’s the site so far.

Switching columns

Giles wants us to move the sidebar from the left to the right:

Figure 1. Move sidebar

Layout is the hardest part of CSS. It’s easy to mess up. When I make changes to layout, I’m very careful about it.

Here’s some code, from the HTML and CSS files:

<div id="main">
  <div id="right">
    ...				
  </div>
  <div id="left">		
    ...
  </div>
</div>
...
#left {
  width: 220px;
  margin-left: 20px;
}
#right {
  width: 510px;
  float: right;
  padding-right: 20px;
}

Figure 2. Some existing code

There are two divisions, left (lines 5 to 7) and right (lines 2 to 4). I want to move left to the right, and right to the left.

Changing names

Here’s more of the code:

  <div id="content">
    <div id="header">    
      <div id="logo">
        ...
      </div>
    </div>
    <div id="main">
      <div id="right">
        ...				
      </div>
      <div id="left">		
        <h3>Nunc pellentesque</h3>
        ...
      </div>
    </div>
    <div id="footer">
      <p>Copyright © 2008...</p>
    </div>
  </div>

Figure 3. Part of the HTML

Let’s rename left, and call it sidebar. It will always be a sidebar, no matter which side it’s on.

Let’s rename right. I want to call it content. That makes sense to me, because that is what it contains, the main content of the page.

But there’s already a content (line 1). Hmm…

So, I’ll rename content on line 1. I’ll call it, hmmm…, header-sidebar-content-footer-container. A long name, but it describes exactly what the container is.

Now I can rename right to content. Here’s what I end up with:

  <div id="header-sidebar-content-footer-container">
    <div id="header">    
      <div id="logo">
        ...
      </div>
    </div>
    <div id="main">
      <div id="content">
        ...				
      </div>
      <div id="sidebar">		
        <h3>Nunc pellentesque</h3>
        ...
      </div>
    </div>
    <div id="footer">
      <p>Copyright © 2008...</p>
    </div>
  </div>

Figure 4. Better names

NetBeans wins again

When you change the names in template.html, you have to change the names in styles.css as well.

NetBeans makes this easy. Open the HTML and CSS files. In the HTML, put your cursor in the name you want to change (e.g., left). Hit Control+R, for “rename.” Enter the new name, leaving the # (or . for class) where it is:

Figure 5. Renaming in NetBeans

Click “Refactor,” and NetBeans should make the changes in the CSS for you as well. Check the CSS file to make sure.

This is yet another reason to use a smart editor like NetBeans. It’s easy to miss something when renaming yourself. Get NetBeans to do it, and it’s quick and correct.

A simple change

Remember, layout is hard. Easy to mess up.

So, when I’m changing layouts, I take it one baby step at a time.

Here’s some code after the name changes.

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  width: 220px;
  margin-left: 20px;
}
#content {
  width: 510px;
  float: right;
  padding-right: 20px;
}

Figure 6. After name changes

I’ll make just a couple of small changes, and see how it looks:

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  float: right; /* Changed */
  width: 220px;
  margin-left: 20px;
}
#content {
  width: 510px;
  float: left; /* Changed */
  padding-right: 20px;
}

Figure 7. Changing floats

I added float: right; to the sidebar (line 11), and changed the content float from right to left (line 17). That’s all. Small steps.

Here’s the result:

Figure 8. Float changes

Hey, not bad! They’re on the correct sides now.

But I need to add a little space:

Figure 9. Need space

Put sidebar a little to the left, and content a little to the right.

Here’s code again:

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  float: right;
  width: 220px;
  margin-left: 20px;
}
#content {
  width: 510px;
  float: left;
  padding-right: 20px;
}

Figure 7 (again). Changing floats

Check out lines 13 and 18. What if I changed left to right in line 13, and right to left in line 18? We’d have:

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  float: right;
  width: 220px;
  margin-right: 20px;
}
#content {
  width: 510px;
  float: left;
  padding-left: 20px;
}

Figure 10. Switching the spacing

Here’s what we get:

Figure 11. The result

W00fy w00fy w00f w00f w00f! Perfect!

Here’s the site so far.

Summary

• Layout is hard. Go in baby steps.
• Change the names of page elements if it helps you keep things straight.

What now?

We’re doing well! Now for some font work.