CODEWITHSUNDEEP
htmlcss
user908853
user908853

Reputation:

Input not being fully contained by parent

I've got this search form: http://jsfiddle.net/1emsaoq1/2/

<div class="search_language">
    <div class="menu_search_container">
        <form action="/search">
            <input autocomplete="off" onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }" id="search_field" name="q" placeholder="Rechercher..." type="text">
            <a href="#" class="icon-search"></a>
        </form>
    </div>
</div>

The result I'm trying to get is having the input vertically aligned inside the red div. When I inspect the input and parents, I can clearly see that it's parent is well vertically aligned inside the red div but not the input. What is wrong here?

Upvotes: 1

Views: 41

Answers (2)

A. Grima
A. Grima

Reputation: 57

The problem comes from your line-height into your .search_langage, set it to zero or take it off, and your problem will be fix.

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240928

Add vertical-align: top to the #search_field element:

Updated Example

.menu_search_container form #search_field {
    /* other styles.. */
    vertical-align: top;
}

By default, the input element's display is inline-block. In addition, the default value of vertical-align is baseline. Changing the value to top essentially corrects this behavior you are seeing.

Upvotes: 0

Related Questions