Basic CSS styling issue - html

Question

I'm making a new website and in my sidebar I'm trying to add this section below but I'm struggling to get the about text to be to the right of the image. I've tried floating the text left but it didn't really work. The only CSS I've got so far is that the sidebar is 300px wide.
<div id="sidebarabout">
<h3>About Elliott Davidson</h3>
<img src="http://placehold.it/100x100"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. Continue reading</p>
</div>

Answer 1

Add this css and check out
img{float:left;padding:0 15px 0 0}
https://jsfiddle.net/vasanthanvas/s4pb17tr/

Answer 2

Try like this
<p><img src="http://placehold.it/100x100"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. Continue reading</p>

Answer 3

img{float:left;margin:0 15px 0 0}
Padding will squeeze your image little.
You can use margin instead of padding.

Answer 4

You need to set the img and p to be either inline or inline-block on their CSS styles.
And also - depending how you want your text to "float" it may need a width:
https://jsfiddle.net/xoL510og/ << Example
<div id="sidebarabout">
<h3>About Elliott Davidson</h3>
<img style='display:inline-block;' src="http://placehold.it/100x100"><p style='display:inline-block; width:400px;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. Continue reading</p>
</div>

Answer 5

use display: table;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.item-inner{
display: table;
width: 100%;
padding: 20px;
}
.item{
display: table-cell;
vertical-align: top;
}
.item-text{
padding-left: 15px;
}
<div class="item-inner">
<div class="item">
<img src="http://placehold.it/100x100" />
</div>
<div class="item item-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. Continue reading</p>
</div>

Answer 6

When defining the img markup, make sure that it only affects the sidebarabout div. So define the div before img. Example:
#sidebarabout img{
float: left;
padding: 0 15px 0 0;
}
In case u declared a width in ur paragraph element, for example 200px, make sure to reduce this to 185px, since we're using a 15px padding. Otherwise it will mess up ur webpage because the div will become 315px width.
I noticed someone suggested using a margin. Don't use a margin, this will only push the image 15px to the left out of the div.
Also i'm missing a width, height and alt. Make sure to define ur img element the right way, otherwise it will not pass the W3C validator. Use the following:
<img src="http://placehold.it/100x100" width="100" height="100" alt="Description">