Zachary Lodge Zachary Lodge - 1 year ago 85
CSS Question

Float: left not working with text

I am trying to use

float:left
to make a subtitle stay on the same line as a title.

However, when the title breaks to a new line, the subtitle goes to a new line as well.



p {
font-family: Montserrat;
font-size: 24px;
margin: 0px;
padding: 0px;
line-height: 100%;
float: left;
}
.other {
font-size: 14px;
font-family: Montserrat;
padding: 0px;
margin: 0px;
position: relative;
top: 3px;
color: #ff442b;
}

<p><b>Title goes here.&nbsp;</b>
</p>
<p class="other">Subtitle</p>
<br>
<br>
<br>
<div>
<p><b>Title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here, title goes here.&nbsp;</b>
</p>
<p class="other">Subtitle</p>
</div>




Answer Source

You can erase the floatand use display: inline on the p tag:

https://jsfiddle.net/eueuo8kk/

(but you should use a class instead of the ptag, otherwise this will apply to every p tag on the page)

P.S.: I also erased position: relative from the subtitle rule. to keep them aligned along their baselines.