Box model for a Image board CSS - html

Question

Hello guys and girls I Have been working on a Image board as a learning project for the past few week and have run into a bit of a snag with CSS styling mostly in how I should style the Post and it content. What I'm wanting to build would look something like this.
For now the way I'm doing this is by having a div hold a img and another div with the post_content and a header inside of that. and setting it to Display:flex,row
A problem with this would be that the post/header div would out grow the container post div and would make text run off screen. I tried fixing this by giving the post and the img a fixed size 20%/80%. this worked well till i resize the page and the gap between the img and the div grew larger as i size up the page.
here is a sample post any help would be awesome and as always ill be around to answer any questions.
#flex_content {
display: flex;
}
#flex_post {
width: 80%;
}
#post_header {
margin-bottom: 4px;
}
#thumbnail {
width: 10em;
height: auto;
}
#post {
background-color: #333 !important;
float: left;
width: 100%;
}
#post {
height: auto;
width: 100%;
border: 2px solid #F4E8AF;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
word-wrap: break-word;
}
#img {
width: 20%
}
#post_contnet{
width:80%;
}
<div id='post'>
<div id="header">
1455249371.png
<br />
</div>
<div id="flex_content">
<div id="img">
<img id='thumbnail' src="images/1455249371 ">
</div>
<div id='flex_post'>
<div id="reply_header">
<b>Anonymous</b> 10:56
<ahref='chan.php?post=83'>>>No.83</a>
[<a href='thread.php?thread=67'>Reply</a>]
<br />
</div>
<div id='post_contnet'>
[Transparent]
<br />
</div>
</div>
</div>
</div>

Answer 1

Please Try this:
#thumbnail {
width: 10em;
height: auto;
float:left;
margin-right:10px;
}
<div id='post'>
<div id="flex_content">
<div id="img">
<img id='thumbnail' src="1455249371.png">
<div id="header">
1455249371.png
</div>
<b>Anonymous</b> 10:56
<a href='chan.php?post=83'>>>No.83</a>
[<a href='thread.php?thread=67'>Reply</a>]
<br />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>

Answer 2

I think I fixed this while just cleaning up my code all i did was remove the width:20% from the img tag and boom bam boom it works