display: inline-block; divs behaving erratically

I ha开发者_运维问答ve a main div, and three divs inside of it. They are all given a width 30%, and they are all centered within the main div.

I used display: inline-block; so that the three divs appear next to each other, but when I give them a height of anything, the two left-most go down a bit, and the right one stays where it should. All that's inside the divs is just simple inputs, nothing that could dynamically increase the div's size.

How should I fix this?

---

It's quite hard to work out the issue without any live code but give these a go. For the DIVs inside the main DIV, assign the class vertical-align:top

Another option (or as well as) is to set the line-height to the desired height rather than the height.

If you have no luck with these, I suggest you put your html and css up on jsfiddle.

---

Yes. the three inside divs must be floated to the left so that they should align exactly. without floating, they can create problems in different browsers.

CSS Code

#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}

HTML Code

<div id="wrapper">
   <div class="inner"></div>
   <div class="inner"></div>
   <div class="inner" style=" margin:0;"></div>
</div>

---

Here's a working solution. http://jsfiddle.net/j3zjg/

<style>
#container{
    width:500px;
    height:300px;
    border:1px solid red;
}

#container div{
    width:30%;
    float:left;
    height:40px;
    background:red;
    margin-right:5px;
}
</style>

<div id="container">
    <div></div>
    <div></div>
    <div></div>
</div>