Text inside div displaces other divs

Question

I have placed 3 divs next to each other using the block-inline property.

When I add text inside the div that exceeds the divs width, it will displace surrounding divs by shifting them down slightly.

<div class="explained_container">
    <div class="explained_c-1">Why does text in this div displace the other divs</div>
    <div class="explained_c-2">Div 2</div> 
    <div class="explained_c-3">Div 3</div> 
</div>

Here is a fiddle I created to present the problem.

http://jsfiddle.net/32E8m/

you need to define a float value for the divs, like `div { float: left }` see forked fiddle -> http://jsfiddle.net/32E8m/2/ — davidkonrad, Mar 18 '14 at 13:42
possible duplicate of [two inline-block div with different font-size, can't be in the exact same line](http://stackoverflow.com/questions/22405858/two-inline-block-div-with-different-font-size-cant-be-in-the-exact-same-line) — Hashem Qolami, Mar 18 '14 at 13:48

score 4 · Accepted Answer · answered Mar 18 '14 at 13:44

4

Add float:left to these classes .explained_c-1, .explained_c-2, .explained_c-3

answered Mar 18 '14 at 13:44

James

4,540
1
18
34

score 2 · Answer 2 · answered Mar 18 '14 at 13:44

2

Missing float: left.

.explained_c-1, .explained_c-2, .explained_c-3 {
display: inline-block;
width: 33.3%;
height: 160px;
margin-right: -4px;
float:left;
}

See http://jsfiddle.net/32E8m/3/

answered Mar 18 '14 at 13:44

Jaroslav Kubacek

1,387
18
26

score 2 · Answer 3 · answered Mar 18 '14 at 13:44

I have added float:left; to all 3 div elements. now you can add as many text as you want.

    <div class="explained_container">
<div class="explained_c-1">Now you can have as many text as you want</div>
<div class="explained_c-2">Div 2</div> 
<div class="explained_c-3">Div 3</div>
</div>


.explained_container{
    width: 604px;
    }

.explained_c-1, .explained_c-2, .explained_c-3 {
    display: inline-block;
    width: 33.3%;
    height: 160px;
    margin-right: -4px;
    float: left;
    }

.explained_c-1 {
    background: #bbb;  
    }

.explained_c-2 {
    background: #ccc;
    }

.explained_c-3 {
    background: #ddd;
    }

http://jsfiddle.net/32E8m/4/

score 2 · Answer 4 · answered Mar 18 '14 at 13:44

I would just set the vertical-align: top; property to those classes (.explained_c-1, .explained_c-2, .explained_c-3) because you might not always want to float them.

Check it out here: http://jsfiddle.net/32E8m/5/

This way, you are aligning the elements to each other from the top of each of them.

Text inside div displaces other divs

4 Answers4