css question

longie

hope ye can help

I have in my style sheet the following;

.tableCell15Pct
{
float: left;
display: inline;
margin: 0;
width: 15%;
}
.tableCell20Pct
{
float: left;
display: inline;
margin: 0;
width: 20%;
}

my html code looks like this;

[HTML]<div class="tableCell15Pct">
<img id="null_notvalid" class="hidden" src="error.gif" align="absmiddle"/>County:</div>
</div>
<div class="tableCell20Pct">
<SELECT class="input" id="SOLCOUNTY" name="SOLCOUNTY">
<OPTION BGCOLOR="white"> </OPTION>
<OPTION value="CT3 ">Antrim</OPTION>
</SELECT>
</div>
<div class="tableCell15Pct">
<img id="null_notvalid" class="hidden" src="error.gif" align="absmiddle"/>Reference:</div>
</div>
<div class="tableCell20Pct">
<INPUT class="input" name="SOLREF" type="TEXT" MAXLENGTH="50" SIZE="30"/>
</div>[/HTML]

So i want to display the following;

County: SELECT BOX Reference: INPUT BOX

However, the select box is shorter that the allocated 15% which pulls the rest accross. Thus, the line above it is out of sync...this code is used within a frameset which is given 80% of the screen!

The above code works fine except when using select boxes that are too short!

Any ideas? Have attached an image, the second row is at fault.

dob99

I haven't checked, but I reckon you would either need to use "display: block" (this might cause other problems) or set the width of the SELECT itself, rather than the DIV container.