Microsoft.com Redesign: Pardon Our Dust

In the previous installment of our Microsoft.com Home Page Redesign project we laid the groundwork for the new page. It's not pretty but it's got what we need. This time we will turn our attention to positioning "building blocks". We won't get the page to look perfect just yet, but all major elements should be in their places by the time we're done.

Look at the diagram from the previous post once more:

We've got a "traditional" layout with a header, three columns and a footer. The big question is how we position them. This is one of the most important decisions you have to make.

Primarily, there are two approaches: positioning and floating.

Positioning allows you to specify where exactly to position an element (much like in Windows Forms) in relation to another element, which can be even the browser window itself. This is what Visual Studio.NET tries to achieve with its clumsy GridLayout. I noticed that most authors over at the CSS Zen Garden use absolute positioning.

With floating you can alter the page flow in interesting ways. It's a great alternative to tables! Floats aren't exactly a walk in the park, however, and browsers tend to support various aspects of floating differently.

Both positioning and floating have pros and cons. I think it's much easier to master positioning, and browsers seem to support it much better, but I find floats safer. If you have a columnar layout, be it 2 or 3 columns, and you never know which one can be the longest you may get into trouble. An absolutely positioned element is completely removed from the document flow, and other elements take its spot. If a column that is absolutely positioned happens to grow too long it will overlap elements of the normal page flow. Not pretty. Therefore positioning works better if you know what to expect.

In our case the content area is the longest. But! Should we add more links to the navigation sidebar it will become longer than content. Nobody says this can't happen. This is why I think floats fit the bill just right for our redesign exercise. Let's get our hands dirty!

To make it easier for you to follow along I've added styles at the top of the work-in-progress page. This is the only difference from the previous post.

Rules Of Engagement

The CSS spec states,

All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

Note that we're working with XHTML, which is a derivative of XML, and therefore casing does matter. We'll keep all id and class attributes lower case. We will also steer clear of hyphens and underscores!

First things first:

body {
  background: #fff;
  color: #000;
  font: normal 11px/14px Verdana, Geneva, Arial, Helvetica, 
        sans-serif;
  margin: 0px;
  padding: 0px;
}

This is my rule: when declaring rules for body I always set both the foreground and background colors. We'll use 11px Verdana with line height of 14px. Thanks to the nature of CSS every element on our page will inherit this font.

Images get a nasty border by default, so it's important to get rid of it right up front:

img { display: block; border: 0; }

Ordered and unordered lists have been a thorn in the side of many developers. This is because Internet Explorer, Mozilla and Opera have different indentation distances. Eric Meyers published a great article at Netscape DevEdge which saved me a lot of hair pulling. Along these lines I declared rules for lists as follows:

ol, ul {
  margin-left: 10px;
  padding-left: 7px;
}

I also decided to change the look of hyperlinks a little bit. Microsoft's page has every link underlined which I find annoying with that many links there. A link will get its traditional underline once hovered over:

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: red;
}

Setting Up Columns

We've already decided on a 3-column layout with a header and a footer. We've also also decided to stick with floats.

#main {
  float: left;
  width: 770px;
  padding: 0px;
  margin: 0px;
}

#navsidebar {
  width: 180px;
  float: left;
  background: yellow;
}

#content {
  margin-right: 145px;
  margin-left: 180px;
}

#miscsidebar {
  float: right;
  width: 145px;
  background: yellow;
}

The container for all three columns (<div id="main">) is 770px wide which makes the page legible in 800x600. You might've noticed it's floated left. I will explain the reasoning behind it later.

The navigation sidebar is 180px wide and docked left; the miscellaneous sidebar is 145px wide and floated right. The content area has to be squeezed 180px on the left to give room to the navigation sidebar, and 145px on the right to accommodate the miscellaneous sidebar. This is accomplished with margin-left and margin-right. I added a yellow background just to outline the boundaries of sidebars. This nastiness will be gone later.

It's important that neither column stretches wider than its allotted width. In Mozilla and Firefox floated columns will simply overlap (which is not too bad), but in Internet Explorer one column will slide underneath the other which is very ugly. What makes matters worse Internet Explorer doesn't support max-width or min-width. Go figure. If we positioned columns absolutely no elbow pushing would've taken place at all no matter how bad the overlap.

The reason we're putting up with floats is the footer. Our footer CSS declaration is quite simple:

#footer {
  width: 100%;
  clear: both;
  border-top: 1px solid #03c;
}

What's important here is clear:both which cancels floating of previous elements and restores normal page flow. No matter which column is longer the footer will always be underneath the three of them.

As to the masthead and local navigation... those two are easy. Take a look at the source code. There's nothing special about them yet.

#masthead {
  width: 100%;
  font-size: 11px;
  background: #1e77D3;
  padding: 0px;
  margin: 0px;
  border: 1px solid #1e77D3;
}

#localnav {
  border-top: solid 1px #999;
  border-bottom: solid 1px #999;
  background: #f1f1f1;
  padding: 2px 0px;
  margin: 0px;
}

What About Lists?

Lists will be dealt with next time. For now we've positioned them where they are supposed to be. Next time we'll make them prettier.

Product Logos

Product logos required a special approach because they were all one image. I declared two empty divs to display them.

<div id="prodlogos1"><!-- --></div>

<div id="prodlogos2"><!-- --></div>

Next I gave them the same height and half of product images each.

#prodlogos1 {
  background: transparent url(..../brandwhole_5.gif) 0px 0px 
        no-repeat;
  height: 95px;
  width: 100%;
}

#prodlogos2 {
  background: transparent url(..../brandwhole_5.gif) 0px -95px 
        no-repeat;
  height: 95px;
  width: 100%;
}

The first group of products shows the upper half of the image (95px of it) in the background. The second one—the rest of them from 95px down.

What's With Zero Padding And Margins?

Quite often you'll see me use padding:0px;margin:0px;. This is to play safe. Some elements have default (nonzero!) paddings and margins. For example, <h1> through <h6> all do. So does a list, <ul>. You can never be sure enough if every browser will have the same padding or margin on one of those elements, so if I need to be sure there's no gap I clear both the margins and the paddings.

Conclusion

Did I choose the best approach to set up columns? I don't know. There's hardly right or wrong here. This approach has been tested and proven reliable.

Some people would flame me for using pixels and advocate percentages or ems instead, or "fluid" layouts versus fixed. I've also seen JavaScript hacks to absolutely position footers so what's the fuss about floats? I didn't want to resort any CSS or other hacks.

All in all, there are different ways to skin this cat, and this is exactly what is so great about CSS! Do it the way you know or like best. It's all about your imagination.

Take a look at our work-in-progress page. We'll finish it next time. By the way, our HTML and CSS still validate!