Design Challenges

Div Container Width

I have become a great fan of CSS and fluid design for the past couple of years. Tables are a thing of the past. The problem is that even though most Web designers have evolved, browsers have not.

You see browsers are put together by coders, developers if you will. Those types only understand 0 and 1s and have very little time to worry about nuances that pesky designers would devote their time to calculating. One of those nuances are containers like div.

Originally designed to serve as layers, again for Web and Graphic designers, div have become very useful as not only can they float and be positioned, but they serve as containers for content on the Web page.

Here comes my issue, I been having some problem fitting the content on a multi-column site. After some quick Googling, I came across a forum thread explaining that the total outside width of a div box is the sum of the values for the following properties:

margin-left
+ border-left-width
+ padding-left
+ width
+ padding-right
+ border-right-width
+ margin-right
= total occupied width of any {display:block} type box

This makes no sense to me. Although Firefox does follow standards and many accuse Internet Explorer of breaking rules and misbehaving; IE6 and IE7 follow rules much more closely to how designers work. When I designed a page I typically render it in Photoshop, then I translate the work into HTML and CSS. When I measure my drawings in Photoshop, IE follows suit, while I have to more intensely calculate when it comes to Firefox.

The bottom line is that it is unfortunate that browser creators can't come together and be unified so that we, as Web designers, don't have to patch holes cause by the multitude of browsers. Perhaps one day the W3C will succeed in unifying browsers with coming up with standards and rules. As for me, I'm just waiting for Google to come out with their own browser, take over the world, and keep making us drink their cool-aid, until then, I'll keep plugging the holes and hope to stay afloat.

Labels: CSS, Design, dreamweaver, Google, Search Engine, SEO, Web Design