CODEWITHSUNDEEP
csshtml
AKor
AKor

Reputation: 8882

display: inline-block; divs behaving erratically

I have 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?

Upvotes: 1

Views: 3182

Answers (3)

themajiks
themajiks

Reputation: 420

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>

Upvotes: 0

Hussein
Hussein

Reputation: 42808

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>

Upvotes: 0

Dan
Dan

Reputation: 10351

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.

Upvotes: 2

Related Questions