CODEWITHSUNDEEP
htmlcss
SkyN
SkyN

Reputation: 1533

Why first "display: inline-block;" div below that the second?

Why first "display: inline-block;" div below that the second ? I want two div in one line.

see example http://jsfiddle.net/ubo2bok9/

CSS code

.conteiner { 
    display: inline-block;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
}

.inConteiner {
    width:  190px; 
    height: 30px;

    background-color: #29e;
    color: white;

    margin: 2px;
}

HTML code

<div class="conteiner">
    first 
</div>

<div class="conteiner" id="BaseConteiner">
    second
    <div class="inConteiner">
      <p> 111111111111111 </p>
    </div>
    <div class="inConteiner">
      <p> 222222222222222 </p>
    </div>
    <div class="inConteiner">
      <p> 333333333333333 </p>
    </div>
</div>

Upvotes: 0

Views: 46

Answers (4)

Rasel
Rasel

Reputation: 5734

add vertical-align:top; in .conteiner div

.conteiner { 
    display: inline-block;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
    vertical-align:top;
}

DEMO

Upvotes: 0

Raghavendra
Raghavendra

Reputation: 3580

you could use like this

.conteiner { 
    display: table-cell;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
    float:left;
}

for fixed width just use table-cell it will work fine.

Upvotes: 0

Billy
Billy

Reputation: 1043

You just need to set vertical-align:middle; to your .conteiner element because the text is being aligned with the elements in another container.

See the fiddle

Upvotes: 3

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Add a property float:left to your .conteiner

DEMO

.conteiner { 
    display: inline-block;
    height: 300px; 
    width:  200px; 
    background-color: #2e9;
    margin: 2px;
    float:left;
}

Upvotes: 1

Related Questions