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>