CSS - The Single Best Rule Noone Told Me Options

[bwelford]

I've now had the joy of taking away tables from my web pages and trying to make them work with Divs so that they don't break in any browser. I read lots of different hacks but it was in an obscure thread that I picked up the most useful rule of all.

It's so simple too. It's always to use two divs one inside the other. The outer div has no padding and no borders but does have a width. The inner one has whatever padding and borders you want but does not have a width. The CSS code will look something like this:

div#sidebar {
width:200px;
/*---   add whatever other conditions you wish but no padding or borders  ---*/
}

div#sidebarbox {
padding:10px;
border: 2px solid #000;
/*---   add whatever other conditions you wish but no width   ---*/
}

The HTML code then looks as follows:

<div id=\"sidebar\">
<div id=\"sidebarbox\">
text content
</div>
</div>

I believe this will not break in most browsers. I was forced to do this given the different treatments that particularly Firefox, Internet Explorer and Opera apply to the width, padding and borders for divs.

I can't believe this hasn't been discussed before. Have I got it right? Why isn't this the #1 rule in CSS circles?

[bragadocchio]

Hi Barry,

It's not the number one rule mainly because there are a lot of things that you need to understand before you get to the Visual Model of CSS2, and how containing blocks work.

It helps to first understand how a selector works, how values are assigned, and how inheritance and cascading work.

Once you have those down, you need to be able to understand the box model.

After you have that, the visual model, and things like containing blocks are the next step. A lot of tutorials don't get that far. Your sidebar div acts as a containing block for your sidebarbox. It helps give it context, when it comes to positioning.

This is about the simplest illustration I could find of how a containing block works:

http://members.aol.com/jbjtutor/css/pagec_27.html

I'll throw a more complicated example at you, too:

http://www.stopdesign.com/articles/absolute/

[Adrian]

Why isn't this the #1 rule in CSS circles?

Because it's not semantic, pretty code

It's still a hack, just like the usual box model hacks, just more 'standard' from a technical point of view.

[AbleReach]

NICE list of examples. You've covered quite the gamut, between w3c's verbal documentation, Stopdesign's lovely look so thoughtful and full of resources, and the little straightforward diagram at http://members.aol.com/jbjtutor/css/pagec_27.html.

If I were to choose a preferred site I'd go for Stopdesign.

On the other hand, the AOL page made sense the fastest. Their CSS tutorial is easy as pie, one step at a time. http://members.aol.com/jbjtutor/css/

Thanks for the links, yet again.


Elizabeth

[ILoveJackDaniels]

Yup, Barry, that's a useful thing to know. Personally I've started using it more and more, because IE doesn't treat the Box Model properly. Even the latest versions of IE still get parts of it wrong (for example, the position of a background is calculated before the border is drawn, putting it in the wrong place). It's a nice, relatively safe (though not "clean") way of working part this problem.

[bwelford]

Well this has turned out to be a most useful thread. There are some great resources there, Bill. I picked up my knowledge of CSS via some other sources, but there are many good ones out there.

When I started this thread, however, I had another thought in mind. The thread wasn't titled 'The Single Best Rule Noone Told Me'. It should have been titled, 'The Single Best Rule Noone Told Me'. I've been un-tabling my website and, during a period of two days, I was adrift on this question of positioning of divs and cross browser compatibility. I was checking the design in Firefox and then hacking the design to work with IE. Google et al have lots of different approaches to hacks but I settled on the one where you have a section starting
html > body
for those commands you only want the non-IE browsers to apply.
I then used
*html
to start a section for those commands only the IE browsers should follow.

Great. My design worked fine for both IE 6.0 and FF. Job over ... Hey perhaps I should just check it in Opera (a popular browser for some here). Oops. The design broke. I even wrote out a post to ask for help to get an additional hack to handle Opera. Then I spotted the container within a container idea on some other forum post and instantly all my problems were over. Why couldn't I have got to that one first? Well of course all the techy types know that Internet Explorer is bad news as far as standards go so there's much more visibility on hacks for IE. It almost seems like the only game in town.

The reality is that you can't just assume that there are two groups of browsers: the standards-compliant browsers and the IE family. To my non-expert eye, on the question of width of a div, Opera is closer to IE than to Firefox. The container within a container approach seems to do the job, so why isn't there any visibility on it.

I'm left with two questions, perhaps related:

Because it's not semantic, pretty code

.
To me, Adrian, it seems an elegant way of handling this mish-mash of ways browsers handle standards. So how could it be prettier?

It's a nice, relatively safe (though not \"clean\") way of working part of this problem.

What do I need to watch out for, Dave, in applying this approach? Does it in turn create other problems?

[Adrian]

It's purely because you end up using 2 div's to do the job of one. If the browsers handled it correctly, you wouldn't need a hack like that. It's part of the reason there are so many variations of the original FIR method for image replacement. Some methods rely on insertnig additional code. Some people don't want that. But there's generally some form of compromise required.

Any time you use a hack, you end up with something slightly more complicated to manage in the future. Something that might come back and bite you, especially when you try and redesign again. Part of the reasoning behind using good code, is that ongoing changes and maintenance should be easier, becuase you shouldn't have to go through editing lots of HTML. Start adding extra things like that in, and the chances of having to go back and edit the HTML increases.

As Dave says, relatively safe, but I wouldn't go as far to say it's as safe as if you didn't need the extra div.

Personally I've never needed that particular function, though I do often use container div's for overall page layout. My site for example has a container div to get the overall width sorted. Everything else resides inside it.

[jetboy]

Barry,

This method gets my vote. I've been using it for the last couple of years with no problem. It works on every browser I'm remotely bothered about (back to Opera 5, IE5, IE5 Mac, Moz 0.9, Konq 3) without issue.

I'd argue that adding an extra div for padding, while not an ideal situation, is no less semantically correct than any other use of elements as placeholders for visual styling - such as the empty elements in the CSS Zen Garden HTML. At worst it's unwanted code bloat.

Surely this has got to be preferable to delivering one CSS rule to IE and one rule to other browsers? Especially when the usual method of doing this is by CSS hack; a non-standards compliant approach which exploits one browser bug to band-aid the effects of another.

[ILoveJackDaniels]

As long as you're sticking to the standards, Barry, it is very low risk - it *should* always be interpreted the same way. It's not "clean" because it does mean adding an extra, semantically meaningless, div. It shouldn't create problems, though, apart from - as Adrian says - in the future, when changing things around.

Personally, I often use this approach - a second div within containers - because it is the best of the available options for dealing with IE's box model problems.

[phaithful]

You know I find it ironic.

Back in the day when Tables were the way to go, it was always a pain in the butt to have do hacks to adjust to Netscape Nav, and IE was the greatest. I'd always think... dang... why can Netscape just act like IE.

Nowadays, with use of DIVs & CSS, it's IE that's the pain in the butt and Firefox / Mozilla that behaves the way it should.

[bwelford]

Well, I'm not sure about that, phaithful. If I'm understanding correctly, on this question of the width of a div when there is padding or margins involved, then IE and Opera have similar definitions and it is Mozilla / FF that is different.

[phaithful]

you know I've never tried working with opera outside of viewing it on browsercam... but from my understanding, the FF / Mozilla browser is closer to abiding by the W3Cs standards than is IE.

Tantek's famous hack tackles that issue: http://tantek.com/CSS/Examples/boxmodelhack.html

However, I could be wrong.... I'm not exactly clear on the facts. I just wish the all the browsers would render code the same way.

[ILoveJackDaniels]

Sorry, Barry, but IE's the confused one and Firefox and Opera are identical in supporting the standard properly. IE interprets a width delaration as the distance between the outside edges of the borders of a box, when it actually defines just the area filled with content (the dictance between the inside edges of the padding). That has improved with IE 6 but still is not perfect.

[bwelford]

I hesitate to cross swords with you, Dave, but Opera and Firefox treat width differently. That is part of the dilemma in getting hacks that will cover both Opera and IE since Opera is 'standards compliant' and IE isn't.

I only ran into this when I assumed that Opera was the same as Firefox. I've put together a small example to illustrate the problem. You can check it out in all three browsers at the following link: operatest050617.htm

You will see that apart from the vertical spacing Opera and IE look similar with the upper Div being narrower. This is because both have assumed that the padding in the upper box is within the width.

Firefox looks different because it adds the padding to the width in the upper box. So both boxes look the same width.

The code for operatest050617.htm is as follows:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
<title>Opera Test</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<style type=\"text/css\">
body {
  background:#123;
  margin:0;
  padding:0px;
    width:600px;
 }

div#main {
  width:400px;
  padding:0 50px;
  background:#678;
margin-left:100px;
}

div#main2 {
  width:500px;
  padding: 0;
  background:#abc;
margin-left:100px;
}
</style>
</head>
<body>
<div id=\"main\">
<p>&</p><p>&</p><p>&</p>
<p align=\"center\">This is the Main Div</p>
<p>&</p><p>&</p><p>&</p>
</div>
<div id=\"main2\">
<p>&</p><p>&</p><p>&</p>
<p align=\"center\">This is the Main2 Div</p>
<p>&</p><p>&</p><p>&</p>
</div>
</body>
</html>

This is why I couldn't figure out how to hack Opera to handle width right and thankfully found the container within a container approach. I don't claim to be an expert, I just try to make things work. So if I've gone astray somewhere in the above, please let me know.

[ILoveJackDaniels]

Sorry, Barry, but the problem isn't Firefox or Opera. You're not using standards-compliant code - browsers are using quirks mode when displaying that page.

Change your DTD to the following and you will see Opera and Firefox behave identically and properly. You'll even see IE6 behave, though not other versions.

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

If you apply a positioned background (positioned in pixels is easiest) to those boxes, and a border, you will then see that IE's box model is still wrong, and all they've done is put a hack of some sort into IE6 to work around the box model issue, rather than actually fixing the problem.

[bwelford]

I see what you mean, Dave. I changed the header as you suggested and all three then display the same width for both divs.

This in turn then perhaps raises another danger here. It would appear that Opera in quirks mode behaves differently from Firefox in quirks mode, since they display the divs differently. So what exactly is quirks mode? Do standards apply to quirks mode?

I thought it was not too big a crime to have non-standard coding but perhaps there's a whole new chapter to this puzzle.

[Adrian]

Opera doesn't have a quirks mode per se, it's more the others that do.

Quirks mode come into effect when you don't have a proper DTD at the top of the HTML. When they find a page with either a missing, or incomplete DTD, they go into quirks mode, and try and sort some stuff out, because they can't be as sure how to interpret things.

An old A List Apart article called Fix Your Site With the Right DOCTYPE! may help clarify things.
Remember that articles over 3 yrs old, so some references will be out of date, the general message should be accurate though. Says something about using standards to future proof your coding as well

[bwelford]

This is all very stimulating ... and concerning. To round out this thread, perhaps someone could list the doctypes and the URL's for the tools for validating your code.

Oh silly me, I've got the Firefox web developer tools on my Firefox browser and there is an HTML validation tool sitting right there. Let's just check it out ...

Oh, oh. This current Cre8asite page tests out as:

This page is not Valid HTML 4.01 Transitional!

Let's test out that OperaTest050617.htm page I created earlier as originally posted. This is the message I got.

This Page Is Valid HTML 4.01 Transitional!

The document located at <http://www.strategicmarketingmontreal.ca/operatest050617.htm> was checked and found to be valid HTML 4.01 Transitional. This means that the resource in question identified itself as \"HTML 4.01 Transitional\" and that we successfully performed a formal validation using an SGML or XML Parser (depending on the markup language used).

So, Dave, I'm beginning to get very confused here. :?

[Adrian]

Hmmm, I thought it used to error when shown a doctype like that.
The list of valid HTML4.01 Doctypes from the standards

A lot of sites, particularly CMS type web software like many forums, won't validate. There are generaly few web apps that do, Wordpress does mostly, though depends if you put invalid HTML in a post yourself.

[ILoveJackDaniels]

Barry, don't pay too much attention to that validator when it comes to DTDs. The original DTD you were using was - technically - valid (I think). According to the standards, IIRC, you are allowed to add a DTD without the reference URL in it. However, browsers will not always interpret that correctly and some will slip into quirks mode if you leave out the URL. A better, and still valid, DTD includes the URL.

When it (the DTD) is complete, browsers behave in standards compliant mode.

Opera doesn't have a quirks mode per se, it's more the others that do.

IE and Opera both have quirks modes (added to Opera in version 7) - that's why it looked like they were behaving the same way originally. Quirks mode is a sort of backwards-compatibility more for older sites.

The forum doesn't validate, no. We're using a slightly modified version of the default template, and it would be a lot of work to make that validate.

Finally, here is a list of all HTML DTDs.