Top 10 Tips for Creating Page Layouts with CSS

Follow these top 10 tips and you'll be creating cross-browser CSS layouts like a pro.

Current Job Listings

There's growing pressure in the Web design community for designers to abandon tables as a tool for page layout. In fact, the W3C (the body responsible for creating Web standard recommendations) recommends that tables not be used for layout unless they can be linearized. Instead of tables, Web designers are encouraged to adopt CSS for layout. Easy enough said. Actually doing it is often another thing altogether.

Here are 10 tips that will help you to create CSS layouts without running into some of the more common problems.

1. Don't Use Layers Exclusively

A "layer" in Expression Web is a DIV that is absolutely positioned, and while there are certainly good uses for absolutely positioned DIVs, trying to create a page layout using them is often an unpleasant experience. What you want to do instead is use a combination of absolute and relative positioning for your DIVs.

2. Take Advantage of Nested DIVs

Some designers opt for using only relative positioning when designing a CSS layout, but if you use nested DIVs, you will find that using absolute positioning appropriately can provide you with more flexibility. The secret is understanding that absolutely positioned DIVs work differently when they are nested inside of another DIV.

If you place an absolutely positioned DIV into another DIV, its default location (position 0,0) will be the upper-left corner of the DIV container as shown below.

An absolutely-positioned DIV within relative positioning.

The shaded DIV above will flow with the unshaded DIV as the browser window is sized so that your layout flows the way you want it to. It does so because position 0,0 is the upper-left corner of the relatively positioned DIV and not the upper-left corner of the browser window like many people might think.

3. Position Larger Page Elements First

Position your larger interface elements before smaller ones. For example, if you have a large area at the top of your page that contains a logo, position that element first and then position other elements relative to it. Keep the previous tip in mind while doing this and you'll have fewer problems.

4. Make Small Changes and Test CSS Styles Often

Don't go crazy changing all kinds of attributes in a style without testing between changes. Identifying the cause of minor positioning discrepancies is hard enough without having no idea which CSS property is affecting you. If you make small changes and then carefully test positioning, you'll not only avoid a black box later, but you'll also learn a lot that you can use in future projects.

Here's one other reason why you'll want to adopt this rule: Positioning changes to one element affect all other elements that are relative to that element. Therefore, as Charles Emerson Winchester used to say, do one thing, do it very well, and then move on to the next.

5. Carefully Choose Your HTML Elements

You'll want to try and stay away from page elements that tend to render slightly differently in different browsers. For example, one of the more common ways to create a CSS menu system is to use an unordered list and a float on the individual list items. However, once you move such a menu into an explicitly positioned DIV, you may find that positioning differs between browsers. In that kind of situation, you might be better of resorting to using nested DIVs for your menu items.

6. Use SuperPreview to Identify Positioning Problems

Previewing a page in your browser is fine, but in order to test positioning, you should really use SuperPreview because it allows you to see your page in multiple versions of Internet Explorer. In some cases, IE6, IE7, and IE8 will all render elements in a slightly different position. You'll want to find these types of problems quickly and correct them, and SuperPreview is an excellent tool for doing that.

7. Get a Handle on hasLayout

In the Internet Explorer document object model, there is an internal property called hasLayout that is applied to DOM elements under certain conditions. You can't set this property explicitly, but you can set it implicitly if you understand a little about how it works. The reason you may want to do this is because positioning problems in Internet Explorer (particularly in IE6) can often be avoided by giving a particular element layout.

You can determine the value of the hasLayout property for an element by looking at the DOM in SuperPreview. Any element for which hasLayout is true will have orange colored brackets surrounding it like you see in the screenshot below.

hasLayout as displayed in SuperPreview

In the screenshot above, the socNetworkLogos DIV is surrounded with orange brackets which means that hasLayout is true for that DIV. The two anchor elements (<a>) have gray brackets, so hasLayout is false for those elements.

The hasLayout property has no meaning in IE8 mode, so if you are previewing your page in with IE8 in SuperPreview, you won't see any orange brackets.

For more information on hasLayout, check out On Having Layout.

8. Pay Attention to the Quick Position Display Box in SuperPreview

If you select an element in SuperPreview, you'll see a quick position display box that shows dimensions and position for the selected element. You can use this box to identify exactly how far off positioning is, and that information can be an important clue to the cause of positioning problems.

In the screenshot below, a DIV containing header text is positioned differently in IE 7 compatibility mode than it is in Firefox. By selecting the DIV containing the text, the quick position display box tells me that the DIV is displayed 21 pixels higher in IE than it is in Firefox. I can also see that the DIV is 1 pixel shorter in height in IE. (SuperPreview highlights the differences by showing red numbers.) 

SuperPreview Quick Position Display Box

Add 1 to the top position in IE to account for the fact that the DIV is one pixel shorter and you end up with a "real" difference in vertical position of 20 pixels. By reviewing my CSS code and looking for properties that modify position by 20 pixels, I may be able to identify a particular CSS property that isn't working correctly in IE 7.

9. Be Careful When Using Both Graphics and CSS Color Properties

A common technique when using CSS layouts is to position DIVs in proximity to page graphics. When doing so, CSS color properties are often used to match colors in graphics. One of the easiest ways to match graphic colors in CSS properties is to use Expression Web's color picker and click on the desired color in your graphic, but doing so can be a bad idea. Colors can be slightly different in different browsers, so it's possible that the color you pick up with the color selector might be just different enough to cause an unsightly display.

In the image below, the orange shade for the "Home" menu item is slightly different than the rest of the menu. To prevent this kind of issue, make sure to use explicit color values in your CSS that match the color values you use in your graphics application.

Color differences can cause unsightly problems.

10. Use the Correct Method for Centering DIVs

If you have a DIV that you want to be centered in your page, make sure you do it properly or you'll end up with a page that turns to chaos when the browser window is resized. To correctly center a DIV, you need to do three things. First, set the position property. Second, set the width for the DIV. Third, set the left and right margin to "auto". The following CSS code demonstrates this technique.

#mainContent {

    position: relative;

    width: 730px;

    margin-left: auto;

    margin-right: auto;

}

The position property doesn't have to be set to relative, but it does have to be set to something other than the default.

Conclusion

Using these tips along with time and testing, you can set up a complex layout using CSS without running into some of the more common pitfalls. However, the most important thing you can do to become an expert in this area is to practice creating layouts and troubleshooting layout problems. In the beginning, you may find that you're spending hours tracking down problems, but each problem resolution adds to your knowledge of CSS and positioning. In the end, that experience is more valuable than any tip I can offer.

Join the Network World communities on Facebook and LinkedIn to comment on topics that are top of mind.
Related:
Now read: Getting grounded in IoT