HTML input element being clipped by parent container

HTML input element being clipped by parent container

A picture says a thousand words:

Do you see the search box on the left? The parent is hiding a portion of
the bottom of the search box. The alignment is off, and I can't figure out
why. The effect is persistent in both Chrome and Firefox.
Take a look at this Chrome debugger snapshot:

So the parent container (blue) is one of three equal width div containers
spanning that "header" section you're looking at (which is also a div).
Now, I've also tried to solve this laying out the divs in a table format
using "display: table", as well as using an actual table layout. Both of
these result in the same problem, except that instead of hiding the unseen
portion of the search box, the box is fully visible. It's still out of
alignment with the button to it's left though. But it doesn't extend the
parent container height to accommodate it, it floats out and hovers over
the small top-margin belonging to the main content box below.
Playing with the margin of the search box has no effect, it won't budge. I
should also mention that this only happens with an input element. If I
switch to a textarea, it's working as it should, aligned properly (I'm
reluctant to just use one, I don't want a multi-line textbox). Also, in
this example here, I'm floating the first two "header" containers from the
left (search and navigation button containers) while the last container
(with 1/35) on the right has overflow: hidden to make it fill out the rest
of the available width (the overall "header" container also has overflow:
hidden to make this trick work). Here's the code:
HTML:
<div id="gallery-controls" class="gallery-height">
<div id="gallery-controls-search" class="gallery-height">
<div id="gallery-search-button"></div>
<input id="gallery-search-box" placeholder="Search..." />
</div>
<div id="gallery-controls-navigation" class="gallery-height">
<div id="prev-gallery-button"
class="gallery-navigation-button"></div>
<div id="next-gallery-button"
class="gallery-navigation-button"></div>
</div>
<div id="gallery-controls-info" class="gallery-height">
<span id="navigation-position-info">1/35</span>
</div>
</div>
CSS:
#gallery-controls {
width: 100%;
margin: 8px 0px 0px 30px;
overflow: hidden;
}
.gallery-height {
height: 55px;
}
/**************** SEARCH ****************/
#gallery-controls-search {
float: left;
width: 33.33%;
text-align: left;
}
#gallery-search-button {
display: inline-block;
width: 55px;
height: 55px;
margin-right: 5px;
background: url(/static/images/search-button.png);
cursor: pointer;
}
#gallery-search-box {
display: inline-block;
font-family: "BebasNeueRegular";
font-size: 20px;
color: #DDDDDD;
outline: 0;
padding: 3px 10px 3px 10px;
background: #222222;
-webkit-box-shadow: 0px 2px 3px #666;
-moz-box-shadow: 0px 2px 3px #666;
box-shadow: 0px 2px 3px #666;
border-top: 1px solid rgba(0,0,0,0.1);
border-right: 1px solid rgba(0,0,0,0);
border-bottom: 1px solid rgba(0,0,0,0);
border-left: 1px solid rgba(0,0,0,0);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
/**************** NAVIGATION ****************/
#gallery-controls-navigation {
float: left;
width: 33.33%;
text-align: center;
}
.gallery-navigation-button {
display: inline-block;
width: 55px;
height: 55px;
cursor: pointer;
}
#prev-gallery-button {
background: url(/static/images/prev-gallery-button.png);
margin-right: 10px;
}
#next-gallery-button {
background: url(/static/images/next-gallery-button.png);
}
/**************** INFO ****************/
#gallery-controls-info {
overflow: hidden;
position: relative;
}
#navigation-position-info {
position: absolute;
bottom: -8px;
right: 3px;
font-family: "Lane-Narrow";
font-size: 40px;
color: #FFFFFF;
text-shadow: 0px 2px 3px #222;
}
Can anyone offer any insight or suggest why this is happening?