Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Positioning tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Increase traffic.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

CSS Tip:
Be Careful When You Size Your DIVs

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
June 2004
Vol. 7, No. 8
 • CSS Tip
 • Accessibility Tip
 • Design Tip
  

Moving from a table layout to one using CSS can be frustrating if you aren't prepared to deal with a common browser display problem. Table cells expand to hold all the content placed between opening and closing TD tags. DIV tags behave the same way -sometimes. At other times, the content spills outside the DIV. We'll explain why this happens.

Style Multiple Elements

In the previous Webmaster Tips issue, we discussed how to create custom HTML tags with the SPAN element. The DIV tag works much the same way, but is far more powerful.

Originally meant as a simple tool to group page elements, the DIV tag gives designers additional flexibility and control over layout when it's combined with Cascading Style Sheet (CSS) properties.

  • Formatting instructions (font family, color, border, etc.)
  • Height and width attributes
  • Absolute positioning

Designers use the DIV to create complex page layouts without using tables. Unfortunately, as layouts become more complex, browser compatibility problems increase.

Compatibility Problems With HEIGHT And WIDTH

Consider one of the simplest layouts around: two columns placed side-by-side. One contains the navigation menu and the other contains page content. This seems like the ideal candidate for transition from a table-based layout to a CSS layout.

It makes sense: both DIVs and tables can be nested, have HEIGHT and WIDTH attributes set, contain borders, etc. However, there is one big difference in behavior. If you understand this issue, you'll save yourself a lot of frustrated debugging time. Make a note of this:

Table cells stretch to fit the content placed inside them, but DIVs may not!

Like so many annoying design issues, the basic problem is not with the CSS rules themselves, but how browsers choose to interpret them.

Mozilla, Netscape, and Opera browsers interpret these values as the exact measurements and don't allow a DIV's HEIGHT or WIDTH values to extend beyond what you specify. So if you set the HEIGHT and WIDTH properties for a DIV and then insert images or text that takes up more space, the display will be a jumbled mess.

Internet Explorer is much more forgiving. It considers HEIGHT and WIDTH values to be minimum values and expands the DIV to contain all the content you want - just like a table cell.

Who's right? Well, Explorer isn't following the CSS standards released by the World Wide Web Consortium (W3C) while the other browsers are. It may seem like Explorer is doing you a favor, but consider the result if you're using absolute positioning to place all page elements. If one DIV displays larger than you expect, other important content may be hidden from view!

Compare Explorer And Netscape Displays

Look at the HTML code below. Pay particular attention to the HEIGHT and WIDTH values on the classes and on the images inside the HEAD section:

Inside the BODY section:

Note that the CSS rule sets the WIDTH of the navigation DIV to 125px, but we placed an image inside the DIV itself that's 163px wide. Also note the HEIGHT values on the two DIVs. Both are set to 75% of the browser window, but the navigation DIV may need more room than that.

Here's how it displays in Explorer 6.0. The navigation DIV expands to the right to contain the whole Happy Puppy logo image and the menu items. Note how the menu DIV is taller than the content DIV.

In Netscape 7.1, the entire Happy Puppy logo appears, but the navigation DIV width doesn't stretch to accommodate it. That's why much of the content DIV text over-writes the logo image. The height of both DIVs is fixed at 75%, so the extra content just runs out of both into the white space below.

Neither page looks that great, but the Explorer version is at least readable.

Nested DIV Solution For Explorer

Even though the Explorer version looks better, it still isn't perfect. Fortunately, it's easy to fix - although this is an Explorer-only solution!

Place both DIVs into a container DIV that's set to 100% of page height and set both interior DIVS to 100%. They will fill up the container DIV and the height of both will be equal.

Change the HEIGHT property of both DIVs to 100% and add this style class to your CSS rules: .container{height:100%} and then apply it to the container DIV in the BODY section:

Here's the result in Explorer:

The display in Netscape doesn't change when you do this, but the Explorer version is close to what you expect. If you're sure that all (or at least the vast majority) of your visitors are using Explorer, this solves your problem. It's a great, table-free layout solution.

The Overflow Property

If you need a more cross-browser solution, perhaps the OVERFLOW property is for you. The W3C standard describes the situation like this:

"Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box..."

The OVERFLOW property can have one of four different values:

  • Visible - Content may appear outside the DIV.
  • Hidden - Extra content doesn't display at all.
  • Scroll - Content doesn't display outside the DIV, but the content is visible using scroll bars.
  • Auto - This value is user-agent dependent, but usually creates scroll bars.

Adding the OVERFLOW property to both DIVs keeps the content inside the DIVs, but also creates a "frame" feeling that may not please either designers or visitors.

When we add the "overflow:scroll" CSS rule to the container DIV, we get this display in Netscape 7.1 and Explorer:

Note the scroll bar on the right side. The content of the container section will scroll while the navigation remains static. It does give a "framed" feel, but may help keep visitors oriented if you have some extremely long pages.

Test For Other Browser Display Problems

This is just one example of how browser display issues can completely break your page layout in some browsers. Always test your pages in as many browsers and operating systems as possible.

No time or money for that? Use NetMechanic's Browser Photo tool, which shows you actual screen shots of your Web page in 16 different browser and operating system combinations. It's a user-friendly, online tool, at an affordable price.

And finally, do you have a better solution to this problem that uses basic HTML and/or CSS? We'd love to see it and so would thousands of other webmasters. Send us a link to your page and you may find it starring in an upcoming Webmaster Tips article - with full credit given to you, of course!



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.