Clever Geek Handbook

Floating next to a title when the title is split across two lines

Extension to Create floating text on next line , which basically creates the following:

enter image description here

How do I keep a floating paragraph after the heading is slightly longer?

enter image description here

Desired output:

enter image description here

http://jsfiddle.net/frank_o/06ewqwun/9/

HTML:

<div class="test">
    <h1>Test test test test test test</h1>
    <div class="another">
        <div class="subanother1">
            <p>Another test another test</p>
        </div>
    </div>
</div>

CSS

.test {
    border: 1px solid black;
    width: 300px;
}
h1 {
    float: left;
    border: 1px solid #ccc;
    margin: 0;
    padding: 0;
}
.another {
    display: inline;
    line-height: 1.5em;
}
+3


source to share


3 answers


Change .another

, .subanother1

and p

up display: inline

will solve the problem.

check jsfiddle



.another, .subanother1, p {
    display: inline;
    line-height: 1.5em;
}
+3


source


You can add display: inline-block

to the .subanother1

class:



.test {
    border: 1px solid black;
    width: 300px;
}
h1 {
    border: 1px solid #ccc;
    margin: 0;
    padding: 0;
    display: inline;
}
.another {
    display: inline;
    line-height: 1.5em;
}

.subanother1{
    display: inline-block;/*Add display inline block*/
    line-height: 0em;/*Set line hight to 0em*/
}
      

        
        
        
      

    
<div class="test">
    <h1>Test test test  Test test test</h1>
    <div class="another">
        <div class="subanother1">
            <p>Another test another test</p>
        </div>
    </div>
</div>
Run codeHide result


+4


source


You can play with width

items like here .

0


source






More articles:


All Articles