CODEWITHSUNDEEP
htmlcsslayout
BallSoHard
BallSoHard

Reputation: 93

Text inside div displaces other divs

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/

Upvotes: 0

Views: 826

Answers (4)

Chad
Chad

Reputation: 5418

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.

Upvotes: 2

Robert Verkerk
Robert Verkerk

Reputation: 714

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/

Upvotes: 2

Jaroslav Kubacek
Jaroslav Kubacek

Reputation: 1447

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/

Upvotes: 2

James
James

Reputation: 4580

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

Upvotes: 4

Related Questions