Why is the paragraph not floating beside the profilePic? - html

Question

Somehow, the paragraph is not floating beside the profilePic. It starts from the bottom of the profilePic. I am not able to understand why.
What is the mistake here?
.content {
margin-top: 30px;
margin-left: 20px;
padding-bottom: 20px;
}
.infoBit {
width: 800px;
float: left;
display: inline-block;
font-size: 1.1em;
padding-right: 10px;
padding-top: 10px;
}
.profilePic {
border: 1px blue solid;
height: 49px;
display: inline-block;
width: 49px;
float: left;
}
.infoText {
display: inline-block;
float: left;
}
<div class="content">
<div class="infoBit">
<div class="profilePic"></div>
<div class="infoText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis enim ut sapien sodales commodo. Fusce congue, elit a finibus fermentum, diam eros mollis massa, at eleifend sapien dui eget mauris. Donec nec diam enim. Vivamus commodo placerat risus
vitae auctor. Cras leo elit, egestas eget dolor vitae, facilisis consequat sem. Mauris facilisis ipsum in porttitor ullamcorper. Nam vel massa sed quam venenatis facilisis. Quisque vitae mollis urna. In egestas nunc sed felis consequat, in malesuada
dolor feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
https://jsfiddle.net/4sbzos1r/

Answer 1

It works fine even if is wrapped inside a . Defining width of resolves issue
Please change styles as below
.content
{
margin-top : 30px;
margin-left: 20px;
padding-bottom: 20px;
}
.infoBit
{
width: 800px;
/* float: left; */
display: inline-block;
font-size: 1.1em;
padding-right: 10px;
padding-top: 10px;
}
.profilePic
{
border:1px blue solid;
height: 49px;
display: inline-block;
width: 49px;
float: left;
}
.infoText
{
display: inline-block;
width: 700px;
}

Answer 2

As others have mentioned, it is because you have your <p> wrapped in a <div> with class infoText, which applies the styling display: inline-block; float:left; from the css you wrote. I would suggest either taking out the <div> entirely, or just remove the infoText styling you have. Furthermore, you probably want margin-top:0 on .infoText to bring the text to the top.
Does that make sense?

Answer 3

hope this help you
.content
{
margin-top : 30px;
margin-left: 20px;
padding-bottom: 20px;
}
.infoBit
{
width: 800px;
float: left;
display: inline-block;
font-size: 1.1em;
padding-right: 10px;
padding-top: 10px;
}
.profilePic
{
border:1px blue solid;
height: 49px;
display: inline-block;
width: 49px;
float: left;
}
.infoText
{
display: inline-block;
width:250px
}
.infoText p{
margin-top:0
}
<div class="content">
<div class="infoBit">
<div class="profilePic"></div>
<div class="infoText">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis enim ut sapien sodales commodo. Fusce congue, elit a finibus fermentum, diam eros mollis massa, at eleifend sapien dui eget mauris. Donec nec diam enim. Vivamus commodo placerat risus vitae auctor. Cras leo elit, egestas eget dolor vitae, facilisis consequat sem. Mauris facilisis ipsum in porttitor ullamcorper. Nam vel massa sed quam venenatis facilisis. Quisque vitae mollis urna. In egestas nunc sed felis consequat, in malesuada dolor feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>