Question

I have a css/html related problem that’s really annoying me 🙁

I have a div which is 600px
An input text field of width 500px
A button of width 100px

<div id="search">
     <input type="text" id="search_bar" class="search_bar" name="q"/>
     <button id="search_videos" class="cool_button">Search</button>
</div>

The button and input tag have a bunch of CSS3 properties
It seems fine in firefox, however the button goes onto the next line in Chrome. Is there a CSS I’m missing to adjust the width so it always stays inline?
Thanks

EDIT:

Heres the fiddle 🙂

http://jsfiddle.net/eGyRU/

Answer 1

Your current width is 521px, not 500px. This happens because you must add both width and padding values to obtain final width = 500px + 0.4em x 2 (left and right padding).
It will be solved if you set input width to 479px.