I notice Paul mentioned display: inline-block above too. Might be worth adding that to your handy list, Eric. 
It’s part of my personality. 
(I know I do…)
I know this because I do too. But with CSS this causes problems. I at one time also thought there was a best and one correct way to do things. But with CSS 9 times out of 10 there are quite literally ten ways to do the same thing. Sometimes there is a preferred way. But often times, as with this, there is only preference. There are numerous ways to contain floats and none work in all situations (I would imagine). So it simply boils down to whichever method you prefer. I’ve used them all depending on my mood and the situation. Here are all the available methods to contain floats http://www.visibilityinherit.com/code/contain-floats.php. Pick one and run with it.
My big hangup/FEAR is that you have to program one page 9 different ways to get the damn thing working on all modern browsers…
How ****ed up is it to have to do one thing 9 different ways to make it work for the viewing audience?! 
I don’t know how people like Paul O’ stays ahead of the curve…
Debbie
My big hangup/FEAR is that you have to program one page 9 different ways to get the damn thing working on all modern browsers…
Yeah, it’s kinda annoying to have to tweak for browsers comp. But it’s really not that bad once you get the hang of coding compliantly.
The thing is you have to think of the “9 different ways” each time you code and THEN select the ONE that appropriate for THAT particular INSTANCE.
In essence , this is why when some one comes to a forum and ask something seemingly “simple” … “how do I make a drop down menu.” They will inevitably get asked “post your code … and what have you done so far and what do you intend to do after.” You don.t just code a menu you access a situation. The Zen of CSS is thinking “flow” rather than point.
See Debbie I over think too. Its my curse. Admittedly I’m pretty rusty again. For the last 6 months I’ve only been recoding 400+ table based pages into css on my biz site. A freaken pain in the butt. I’m adding inline-block to my contain floats demo page. From my ever increasing rusting memory… So ie7/6 dont do inline-block on default block elements without the inline and haslayout hack. Default inline elements only need haslayout. Correct? So this bit of code has me confused some. The div container is given linline-block and no haslayout per below code. Although ie6/7 contain its nested float. Just another trick of inline-block? Or am I rustier than I thought?
EDIT: ahh ok I think I answered my own question. inline-block itself is giving ie6/7 haslayout. Thats probably it.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title></title>
<style type=“text/css”>
<!–
/* -------------- rules for everything ------------- */
- {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#333;
}
p {
font-size:1.1em;
}
h1 {
font-size:1.4em;
margin:1.5em 0 1.5em 40px;
}
h2 {
font-size:1.1em;
font-weight:normal;
position:absolute;
bottom:0;
right:0;
padding:2px 5px;
background:#E8E8E8;
border-top:1px solid #000;
border-left:1px solid #000;
}
#wrapper {
background:#666;
min-height:100%;
width:760px;
margin:0 auto;
border:1px solid #000;
} - html #wrapper {
height:100%;
position:relative;
}
/* ------------------- Method #6 ------------------- */
#container {
display:inline-block;
padding:30px;
background:#999;
position:relative;
border:1px solid #000;
}
#float {
float:left;
height:120px;
width:400px;
background:#ccc;
border:1px solid #000;
padding:20px;
position:relative;
}
–>
</style>
</head>
<body>
<div id=“wrapper”>
<h1>Method #6: inline-block</h1>
<div id=“container”>
<div id=“float”>
<p>inline-block container</p>
<h2>Float</h2>
</div>
<h2>Container</h2>
</div>
</div>
</body>
</html>
Yes you answered your own question as far as IE6/7 goes and inline-block causes haslayout to be true for both inline and block elements (unlike height or width which is only a haslayout trigger for elements that understand width and height i.e. block elements)
Even though inline-block doesn’t work on block elements in the way that it should it still applies haslayout to the element. If you then set the element to display:inline in another rule it still retains haslayout and then an inline element in haslayout mode behaves like inline block. This is probably a throw back to ie5 where inline elements could have both height and width applied without doing anything.
For good browsers inline-block sets a new block formatting context (in the same way that floats and overflow other than visible do as I mentioned above) and is the real reason that the element will then enclose its floated children.
Thank you for explaining Paul Well cool then. Unless I’m mistaken that puts inline-block right up there with overflow hidden as a simple float container then.
Ahh yes. As with the others then - depending in the situation.
Morning Ok I added inline-block and AP to my float demos.