Thanks a ton for taking the time out to help!
To move the "validated" class under the other two divs, place "clear: left;" in the validated class description. What that does is places it on a new line if any elements are to the left. A more detailed description can be found here:
http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control
I noticed for the two divs that you have float: left; with display: inline;
If you REMOVE that display: style completely (so that only float: left; is there) it still looks the same.. meaning, they're still aligned horizontally. That works great in this particular example, but if I'm not mistaken, floating a div (in some situations) will have a different effect from lining them up w/ a standalone inline display.
For a quick (and basic) example of what I'm talking about, remove "float: left;" from the BrowerSummary class description and view the page in IE (also make sure that display: inline; is there). You won't need to give the "validated" class a "clear: left;" style as the natural flow of the layout will take over and it will automatically be on the next line.
There's certain situations where there's a visual difference in using inline vs. floating the divs to the left and placing a "clear" style on surrounding elements.
Another thing that irks me is how each browser treats pixel sizes differently. I have a div that's 220 px wide and it has several floated divs inside of it. In IE, the width is just how I like it, but in Mozilla, it's a tad bit smaller.. just enough to take the divs inside and make them wrap to the 2nd line. Example code is below.
View one in IE and the other in Mozilla. You'll notice the Mozilla one fits PERFECTLY while IE makes it a bit wider. Now, I'm not 100% sure on which browser is the correct one, but like I said above, I made this site based off of how it looks in IE (considering 99% of our visitors have an IE of sorts).
In these examples, the differences aren't a big deal and seem pretty trivial, but in the grand scheme of things.. it make a huge difference. Once you have an entire site in divs and the stylesheet in place, it's VERY aggrivating to see it looks perfectly in one browser (IE) only to have half the stuff wrap and overflow in the other.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body
{
font-family: Arial;
font-size: 11px;
background-color: #eeeeee;
}
select
{
font-family: Arial;
font-size: 10px;
}
#DateRangeSelector
{
border: solid 1px #000000;
width: 220px;
}
#DateRangeSelector div
{
padding: 5px;
}
#DateRangeSelector .label, #DateRangeSelector .Month, #DateRangeSelector .Day, #DateRangeSelector .Year
{
text-align: center;
background-color: #cccccc;
display: block;
vertical-align: top;
}
#DateRangeSelector .label, #DateRangeSelector .Month, #DateRangeSelector .Day
{
float: left;
}
#DateRangeSelector .label
{
text-align: center;
width: 45px;
}
#DateRangeSelector .Button
{
background-color: #cccccc;
text-align: right;
}
#DateRangeSelector .Button input
{
width: 75px;
cursor: hand;
}
</style>
</head>
<body>
<div id="DateRangeSelector">
<div class="label">From:</div>
<div class="Month">
<select>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
</select>
</div>
<div class="Day">
<select>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
</select>
</div>
<div class="Year">
<select>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
</select>
</div>
<div class="label">Thru:</div>
<div class="Month">
<select>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
</select>
</div>
<div class="Day">
<select>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
</select>
</div>
<div class="Year">
<select>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
</select>
</div>
<div class="Button">
<input type="button" value="test"/>
</div>
</div>
</body>
</html>