Title: Firefox, IE and Chrome different whitespace handling
Tags: html;css;twitter-bootstrap
Question: I'm curious why I get different results on Chrome and Firefox with this simple code:
Breaks on Chrome
Works on both Firefox, IE and Chrome
The only difference is in HTML layout:
<div class="container"&gt;
<div class="form-wrapper"&gt;
<input class="email" type="text"&gt;
<button class="send pull-right"&gt;Send</button&gt;
</div&gt;
</div&gt;
versus this:
<div class="container"&gt;
<div class="form-wrapper"&gt;
<input class="email" type="text"&gt;<button class="send pull-right"&gt;Send</button&gt;
</div&gt;
</div&gt;
Any recommended fix without ugly hacks and HTML changes?
Comment: Did you specify DOCTYPE ?

Comment: The first link doesn't break in chrome - v37.0.2062.94

Comment: @Vucko on v36.0.1985.143 it breaks. Indeed v37.0.2062.102 works fine. I'm a bit puzzled with that :/

Comment: By the way which html you want to use?

Here is the accepted answer: <input&gt; isn't block elements by default. You must use float:left for them:
.form-wrapper {overflow:hidden;}
input.email, button.send{float:left}

Here is another answer: Method 1:
/* CSS used here will be applied after bootstrap.css */
.form-wrapper {
background-color: #000;
padding: 10px;
font-size: 0; /*set font-size to zero*/
input.email {
background-color: #fff;
border: none;
height: 50px;
width: 70%;
padding-left: 15px;
padding-right: 15px;
font-size: 16px; /*reset font-size*/
button.send {
background-color: grey;
border: none;
height: 50px;
width: 30%;
font-size: 16px; /*reset font-size*/
working demo
Method 2:
Use float for inputs and clear the float using overflow:hidden to parent div.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 4, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:09/02/14', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><twitter-bootstrap>', 'Title': 'Firefox, IE and Chrome different whitespace handling', 'ViewCount': 166, 'id': 25621810, 'user_AboutMe': '', 'user_AccountId': 483814.0, 'user_DisplayName': 'SiliconMind', 'user_Reputation': 2145.0, 'user_Views': 118.0, 'user_id': 899092.0}}