Problem with select boxes in FF

[fluerasa]

I have a problem with select boxes in FF. The moment I place them in #containerCenter, the #containerRight div bounces down. Here is the example: http://www.studioweber.ro/mariuszaharia/livrare00.htm . This happens in FF only. As soon as I remove the select boxes, everything looks fine: http://www.studioweber.ro/mariuszaharia/livrare01.htm.

#containerCenter {
background-color: #FFF;
float: left;
width: 553px;
margin-right: 17px;
margin-bottom: 30px;
height: 90%;
}
#containerRight {
float: left;
width: 220px;
margin-bottom: 30px;
background-color: #FFF;
display: table;
}

Could anyone help? I've even tried using a table inside #containerCenter but same result...

Thanks in advance, Alex

[Lchad]

I'd redo the math.
What's the total width of your design?
Add up all the width's of the div's + margins left and rights and see if everything is a bit too wide for the design. Usually if you reduce the size of one of the div's you'll be able to squeeze it all in.

[masonbarge]

You get slightly different sizing from different browsers for non-specified units of measure (such as input type=text size=). Just start taking a couple of pixels off the floating box widths until it fits.

Actually, the problem is that the height and width of text input areas is that they are dependent on font-size, and different browsers so often give you different font sizes. One thing that might help is to specify a class like input.text {font-size: whatever; line-height: whatever;} and do it in "pt", then put the class inside the input (ie 'class="text"').

Of course, if consistant with your design, you can also give one column a flexible width and/or use percentages for column widths. IE7 (unlike ie6) recognizes minimum width, in my limited experience.