Inline block element, not inline in this case

Question

I have set my search bar div element as inline-block , as well as the img .

However, the div element is below the image, instead on the same horizontal line.

Anyone can advise me why this is happening?

 body { margin: 0; } #header { width: 100%; height: 60px; background-color: #f1f1f1; } #header img { height: 56px; display: inline-block; margin-left: 20px; } #search { display: inline-block; } #search input { display: inline-block; width: 584px; height: 38px; border: 1px solid #d9d9d9; } #search input:hover { border: 1px solid black; } 

 <div id="header"> <img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" /> <div id="search"> <form> <input type="text" name="search" /> </form> </div> </div> 

Answer 1

Your styles are working as they should; the #search input element's width is just too wide! Try looking at the result on a wider screen, and you will see the elements appear inline as expected.

Anticipating your next question, you can prevent wrapping of inline elements using the rule (on the container, eg #header ):

white-space: nowrap

Anticipating your next question (if I may be so bold), you will probably want to set CSS rule:

vertical-align: middle

on both #header img and #search to get the look you want.

Answer 2

Here is the code snippet with what you want. The problem here is width of input. Since its more it bring the div to next line.

 body { margin: 0; } #header { width: 100%; height: 60px; background-color: #f1f1f1; } #header img { height: 56px; display: inline-block; margin-left: 20px; } #search { display: inline-block; height: 100%; position: relative; top: -22px; } #search input { display: inline-block; width: 480px; height: 38px; border: 1px solid #d9d9d9; } #search input:hover { border: 1px solid black; } 

 <div id="header"> <img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" /> <div id="search"> <form> <input type="text" name="search" /> </form> </div> </div> 

Answer 3

The total width of image and search input is greater than full width of screen. Try with lesser width either of image or search input.
try this one

 body { margin: 0; } #header { width: 100%; height: 60px; background-color: #f1f1f1; } #header img { height: 56px; display: inline-block; margin-left: 5px; } #search { display: inline-block; height: 100%; position: relative; top: -22px; } #search input { display: inline-block; width: 450px; height: 38px; border: 1px solid #d9d9d9; } #search input:hover { border: 1px solid black; } 

 <div id="header"> <img src="http://orig04.deviantart.net/1d83/f/2013/087/5/6/google_icon_by_slamiticon-d5z7lrp.png" /> <div id="search"> <form> <input type="text" name="search" /> </form> </div> </div>