[thelist] Nested divs and a horizontal scrollbar PITA

[Jay Blanchard]

Alrighty, I have run smack into the "IE can't properly render nested divs
problem". It displays a horizontal scrollbar without a width attribute being
set for the body;

body {
	width: 99.75%; /* as large as I could go */
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font: 1em/1.7em verdana, arial, sans-serif;
}

The reason that this width has to be set is this, a div using the following;

#content div.warning{
	background-color: #FFCC99;
	border: 1px solid #993300;
	font-style: italic;
	padding: 5px;
}

is nested within a div using;

#content {
	background: #FFFFFF;
	font: 0.8em tahoma, arial, sans-serif;
	height: auto;
	text-align: justify;
	padding: 160px 70px 0px 70px;
}

so that the underlying mark-up looks like this;

<div id="content">
   <div class="warning">
   ...
   </div>
</div>

Is there a more elegant way of getting rid of the horizontal scrollbar that
degrades more cleanly? I have googled for a while now and have found nothing
that works well.

TVMIA!