If I am understanding your question correctly, although the image is placed to the left, you want the text body to remain inline.
Something like this? https://www.w3schools.com/code/tryit.asp?filename=GAUA12AA769P
<style>
.post-container {
margin: 20px 20px 0 0;
overflow: auto;
}
.post-thumb {
float: left;
}
.post-thumb img {
display: block;
width: 42px;
height: 42px;
}
.post-content {
margin-left: 50px;
}
</style>
<body>
<div class="post-container">
<div class="post-thumb"><img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" /></div>
<div class="post-content">
<p>“People say nothing is impossible, but I do nothing every day."</p>
<p>– A. A. Milne</p>
</div>
</div>
</body>
Most notibly I've added display: block;
to the image and set a margin-left: 50px;
on the text content.
EDIT
https://www.w3schools.com/code/tryit.asp?filename=GAUA575L092N
<style>
body {
width: 15em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
.post-container {
margin: 20px 20px 0 0;
overflow: auto;
}
.post-thumb {
margin-top: 30px;
float: left;
}
.post-thumb img {
display: block;
width: 42px;
height: 42px;
}
.post-content {
margin-left: 50px;
}
</style>
<body>
<div class="post-container">
<div class="post-thumb"><img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg" /></div>
<div class="post-content">
<p>“People say nothing is impossible, but I do nothing every day."</p>
<p>– A. A. Milne</p>
</div>
</div>
</body>
I've added the body styling back. There is a margin-top
on the image which pushes it down to be centred against the text, but if you wanted the image to appear at the top left of the text just remove margin-top: 30px
from the .post-thumb
class.
A better option would be to use something like flexbox for this however.
EDIT 2:
I have updated my code to use flexbox, which is a much cleaner and concise solution. You can read more about here.
"This is an approach to layout creation, alignment of elements and
distribution of extra space.
Flex stands for flexible, adaptive. Flexboxes are thus flexible
elements of the layout. One of the main advantages of flexbox is the
ability to fill extra space without the need to use Javascript."
https://www.w3schools.com/code/tryit.asp?filename=GAUAC9HBCS2S
<style>
body {
width: 15em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
.flex-item {
display: flex;
align-items: center;
}
.flex-item img {
flex-grow: 0;
flex-shrink: 0;
width: 42px;
height: 42px;
margin-right: 15px;
}
</style>
<body>
<div class="flex-item">
<img src="https://previews.123rf.com/images/alvincadiz/alvincadiz1604/alvincadiz160400358/56426319-vector-illustration-of-smiley-emoticon-sad-face.jpg">
<div>
<p>“People say nothing is impossible, but I do nothing every day."</p>
<p>– A. A. Milne</p>
</div>
</div>
</body>
<img>
tag should go inside the<body>
tag, but that's not your problem here.float: left
means. Other content wraps around it. Are you trying to reserve space on the left, regardless of whether the image is there or not?<img>
tag may not appear before the<body>
tag.