Zachary Lodge Zachary Lodge - 27 days ago 19
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

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.