Webkit中的内联div对齐问题？

Question

If you check out antonpug.com

You'll notice that in Firefox and Opera, the header states Title (Search Icon) (Menu)

However in Chrome and Safari, it seems like both elements refuse to be inline and you get something like this:

(Search Icon)
Anton Pugachevsky (Menu)

I have been pondering this one for a while, any ideas why this might be happening?

Answer 1

If you wish to make elements float properly in CSS you'll need to set the width of their container, or else the outer container will only gain a width of largest child element.

In your case simply set a width for .navbar-header and the elements will display inline.

If you wish the search to be on the left of the title then simply add float:left to the #search-icon.

For example

.navbar-header{ width:50%; }

.navbar-header #search-icon{ float:left; margin-right:30px; }