CODEWITHSUNDEEP
htmlcss
aardvarkk
aardvarkk

Reputation: 15986

Allow inline-block elements to wrap before stacking

I have two divs next to each other that are displayed using inline-block. As the viewport shrinks, I'd like the text in the leftmost div to wrap before the divs collapse vertically, but I can't seem to make that happen. JSFiddle here.

In the demo, when the viewport shrinks "Should stay in block" is pushed below the title block, whereas I'd like the "Lots of text I want to wrap" to start wrapping to keep the two blocks on the same line.

Upvotes: 0

Views: 495

Answers (2)

ketan
ketan

Reputation: 19341

Use display: table-cell; Instead of display:inline-block will solve your issue.

.title { 
    display: table-cell; 
    vertical-align: top;
}
.box {
    display: table-cell; 
    vertical-align: top;
}
<div class="title">
    <h1>Hi</h1>
    <h2>Lots of text I want to wrap</h2>
</div>
<div class="box">
    Should stay in a block
</div>

Check your updated Fiddle Here.

Upvotes: 2

waytosay
waytosay

Reputation: 198

Can't you make them to fill the body or the container giving them a 50% width?
JSfiddle
EDIT: JSfiddle with a wrapper

.title { 
    display: inline-block; 
    vertical-align: top;
    background-color:red;
    width:50%;
}
.box {
    display: inline-block; 
    vertical-align: top;
    background-color:blue;
    width:50%;
}
<div class="title">
    <h1>Hi</h1>
    <h2>Lots of text I want to wrap</h2>
</div><div class="box">
    Should stay in a block
</div>

Edit: remember to not wrap after the first div, and make sure that there are not spaces </div><div class="box"> so you can use 50% preserving the inline-block

Upvotes: 1

Related Questions