I've kind of resolved the problem in that I created a "row" for the
two floating divisions to be held in so that in essence would resemble
a table. Such as <tr><td>test</td><td>test</td></tr>.
"brow" acts as <tr>. This works fine but still, if I put certain
elements within brow, very strange and unpredicatable behavior
happens.
Now with this "row", I float both cells and they appear as I want
them. I suppose I can live with that. Works just fine in IE as well.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" media="all">
..bigbox { width:500px; height:200px;
border:solid 2px red;
}
..row1 {
text-align:center;
font-family:arial;
font-size:12pt;
border-bottom:solid 2px blue;
}
..brow { clear:left;
width:98%; background-color:#B1F9FE;
}
..row2a { width:50%; float:left; background-color:#B1F9FE;
border-bottom:solid 2px blue;
}
..row2b { float:left; background-color:#B1F9FE;
border-bottom: solid 2px blue;
width:30%;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="row1">Artist</div>
<div class="brow">
<div class="row2a">Name</div>
<div class="row2b">Label</div>
</div>
<div class="brow">
<div class="row2a">Name</div>
<div class="row2b">Label</div>
</div>
</div>
</body>
</html>
