Set select element's exact width as inline float and/or block-level?

[JAB Creations]

I have 490px total available width.

Other elements taking up horizontal space...
object element: 31px
six 19px anchor elements: 114px
---------------------------------
= 145px used
= 345px remaining

I presume inline elements get their width inherited by how much horizontal space they require? However I have to float the select element which and just to ensure block-level behavior I added display: block;. I presume that with 2px worth of horizontal border (border: #000 solid 1px) to fill in the remaining space I'd set the width to 343px and I'd have a perfect fit.

IE8-B1 seems to execute this correctly while Gecko 1.8/1.9, Webkit 523, and Opera 9.5B all disagree and I still have 2px of empty horizontal space.

Could someone please shed some light on this odd dilemma? :)

- John

[MarkFilipak]

Try forcing all elements to have zero padding and zero margin and see if that doesn't give you consistent results. I think the defaults may be getting in the way when you set display:block (which, BTW, you are correct, is a good thing to do in this case). The CSS spec is somewhat vague in this regard. I assume you are putting your floated select-element inside a div{left:1px;width:343px;border;#000 solid 1px} -- note 'left:1px' in the div's style.

[MarkFilipak]

If all else fails, try this:

<div style='width:345px;border:0;padding:0;margin:0;background-color:black'>
<div style='width:343px;left:1px;border:0;padding:0;margin:0;background-color:white'>
...your content here...
</div>
</div>

[JAB Creations]

It already existed in my CSS...

* {
border: 0px;
margin: 0px;
padding: 0px;
}

I'm going to have to side with IE on this one as crazy as it sounds. If the select element is set to block it should behave as a block and thus measure no different from a block.

- John

[MarkFilipak]

Ah! It's the select-element that is display:block. OK. Try...

select{display:block;position:relative;left:1px;width:343px;border;#000 solid 1px}