position of division going down

Question

enter image description here

As you can see in the picture, my element is going down of the nav-menu. My html is like this

<div class="main_menu">
    <a class="item">
        <img id="logo" src="../Data/site_images/Demicon.png">
    </a>
    <div class="item">
        <input id="searchbox">
    </div>
    <div class="item">
        <input id="searchbox2">
    </div>

</div>

And the corresponding css is

body {
  margin: 0px;
}

.main_menu {
  background-color: #369740;
  position: fixed;
  top: 0px;
  height: 50px;
  width: 100%;
}

.main_menu .item {
  display: inline-block;
  height: 100%;
}

.main_menu #logo {
  margin-left: 42px;
  margin-top: 8px;
  margin-right: 42px;
}

Please explain how to change this into a div so that it occupies the parent element completely as in css or explain how to change the position of the input element.

JSFiddle Link

The problem is showing up as described, in Chrome at least, here: http://codepen.io/paulroub/pen/aACrw — Paul Roub, Jun 23 '14 at 17:27

score 1 · Accepted Answer · edited May 23 '17 at 10:32

Setting vertical-align: middle (or top, really anything other than the default of baseline) moves us back into the containing block.

.main_menu .item {
  display: inline-block;
  height: 100%;
  vertical-align: middle;  
}

Adjusting the padding/etc. on the items after that is up to you.

Example: http://codepen.io/paulroub/pen/FzIuy

Some background: Why is this inline-block element pushed downward?

score 0 · Answer 2 · answered Jun 23 '14 at 17:47

0

You need to set the ".items" the same height and line-height than the ".main_menu", the trick here being :

vertical-align: middle;
line-height: [whatever]px;

http://codepen.io/anon/pen/qpazy

answered Jun 23 '14 at 17:47

Christian Bonato

1,253
11
26

position of division going down

2 Answers2