CODEWITHSUNDEEP
htmlcss
Vinay Chandra
Vinay Chandra

Reputation: 532

position of division going down

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

Upvotes: 0

Views: 43

Answers (2)

Christian Bonato
Christian Bonato

Reputation: 1306

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

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36438

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?

Upvotes: 1

Related Questions