Why does IE respect label CSS width, but not Firefox or Chrome?

Question

I'm trying to write a contact form however my label widths aren't being forced in Firefox or Chrome - IE seems to be working okay though (for once). Here's my HTML

 <form name="" id="" action="" method="post">

            <div id="my_form">

                <div>
                    <label for="username">Username:</label>
                    <input type="text" name="username" id="username" />
                </div>
            <div>
<form>

and here's my CSS

#my_form div label{width:200px;display:inline-block;}

any ideas how I can force the label width, they seem to collapse

Answer 1

Try this:

#my_form div label{width:200px; display:block; float:left;}

See this running (http://jsfiddle.net/jrpab/), it works fine in Chrome.