Menu
Im working on a header for a website and i have a problem with search option.
I have include an input and a button tag.
Thoose have to have a vertical-align: middle; and should be side by side.
I've try something but it doesn't work. Can somebody explain why and how i fix that?
HTML:
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" />
<button id="search_button"><img src="search.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" alt="" title="" /></button>
</div>
CSS:
#main_search {
float: right;
line-height: 60px;
margin: 0 50px 0 0;
}
#main_search_input {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 20px;
line-height: 20px;
width: 200px;
vertical-align: middle;
padding: 5px 10px 5px 10px !important;
}
#search_button {
background-color: #FFF;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 30px;
padding: 5px;
vertical-align: middle;
}
FIDDLE
input and button elements are inline elements, as such by separating them by a newline in your code, this is effectively interpreted and rendered as a whitespace character, leading to a gap appearing between them.
To solve this, add:
input, button{
margin:0;
}
Then remove the new line from between the elements in your HTML:
<body>
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" /><button id="search_button">
<img src="https://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/magnifier.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" />
</button>
</div>
</body>
(also requiring setting no margins, per above)
Float the two elements so they push up against one another
Apply a font-size:0 to #main_search so the space has a width of zero
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
