How can I ensure the fieldset border does not allow the div with the help message to spill over. I've tried setting clear:both at the fieldset and the div level but no effect.
Needs to work in IE and FF
Attached is a working example of the issue
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
fieldset {
margin-bottom:1em;
}
fieldset p {
padding:5px;
margin:0px;
margin-top:5px;
margin-bottom:0px;
}
fieldset legend {
font-size:0.9em;
}
form {
margin-top:5px;
margin-bottom:5px;
}
form div.notes p,
form div small {
line-height:125%;
}
form div.notes li {
margin-left:5px;
list-style-position:inside
;
}
form fieldset div.notes {
float:right;
position:absolute;
right:30px;
width:150px;
height:auto;
margin:0px 0px 10px 10px;
padding:5px;
border:1px solid #666666;
background-color:#ffffe1;
color:#666666;
font-size:.75em;
}
form fieldset div.notes h4 {
background-image:url(image
s/icon_inf
o.png);
background-repeat:no-repea
t;
background-position:top left;
padding:3px 0px 2px 27px;
border-width:0px 0px 1px 0px;
border-style:solid;
border-color:#666666;
color:#666666;
margin-bottom:5px;
margin-top:0px;
font-size:1.3em;
}
form fieldset div.notes p {
margin:0em 0em 1.2em 0em;
color:#666666;
}
form fieldset div.notes p.last {
margin:0em;
padding-bottom:5px;
}
form label {
font-weight:bold;
}
</style>
</HEAD>
<BODY>
<form>
<fieldset><legend>Comment Display</legend>
<div class="notes" style="clear:both;">
<h4>Comment Options</h4>
<li>Default mode for how comments will be displayed</li><li>Default order to display comments</li>
<li>Set maximum number of comments to show - default is 100</li>xx
</div>
<table class="inputTable">
<tr>
<td><label>Display Mode</label></td>
<td>
<select name="commentmode">
<option value="flat">Flat</option>
<option value="nested">Nested</opt
ion>
<option value="nocomment">No Comments</option>
<option value="threaded" selected="selected">Thread
ed</option
>
</select>
</td>
</tr>
<tr>
<td><label>Sort Order</label></td>
<td>
<select name="commentorder">
<option value="DESC">Newest First</option>
<option value="ASC" selected="selected">Oldest
First</option>
</select>
</td>
</tr>
<tr>
<td><label for="commentlimit">Comment
Limit:</label></td>
<td><input type="text" id="commentlimit" name="commentlimit" size="5" maxlength="5" value="100"></td>
</tr>
</table>
</fieldset>
</form>
</BODY>
</HTML>