Css - Figure placing - css

Question

Hi everyone I'm fairly new to HTML5/CSS, so I'm in need of some help.
The problem is the image won't go inside the box.
It's current placement is at the bottom left of the box.
I'd like to put it in the left side IN the box and the h2 and p on the image's right side
I'm just stuck as to what I'm missing
Also, is it okay if I create an id for each of the html element? it just seems like there are too many elements, and is this frowned upon in web design? If so, what's the proper way of doing it?
Thanks very much in advance
#featPost {
padding:70px 0px 0px 51.2px;
/* background-color: orange;*/
}
#featPost section {
width: 750px;
height: 261px;
border-style: double;
border-width: 4px;
border-color: black;
}
#featPost figure {
position: relative;
padding-right:20px;
float:left;
}
#featPost h1 {
font-family: "Calibri", Helvetica, sans-serif;
}
#featPost h2 {
padding: 50px 0px 10px 41.5px;
font-size: 30px;
text-align: center;
font-family: "Calibri", Helvetica, sans-serif;
}
#featPost section{
border-style: double;
border-width: 4px;
border-color: black;
}
#featPost p {
padding-bottom: 150px;
font-size: 20px;
}
<aside id="featPost"><article>
<h1> Featured Post </h1>
<section>
<h2> Essay as Easy as 1,2,3 </h2>
<figure>
<img src="images/example.png" width="250" height="250" alt="image of an egg">
</figure>
<p> What? There are rules in writing an essay?? Read more</p>
</section>
</article></aside>

Answer 1

I would suggest to float the image to the left. I updated your code a bit:
HTML:
<aside id="featPost">
<article>
<h1> Featured Post </h1>
<section>
<figure>
<img src="http://placehold.it/250x250" width="250" height="250" alt="image of an egg" />
</figure>
<h2> Essay as Easy as 1,2,3 </h2>
<p>What? There are rules in writing an essay?? Read more</p>
</section>
</article>
</aside>
CSS:
#featPost {
padding:70px 0px 0px 51.2px;
/* background-color: orange;*/
}
#featPost section {
width: 750px;
overflow: auto;
border: 4px double black;
}
#featPost figure {
float:left;
}
#featPost h1 {
font-family:"Calibri", Helvetica, sans-serif;
}
#featPost h2 {
margin-top: 50px;
font-size: 30px;
text-align: center;
font-family:"Calibri", Helvetica, sans-serif;
}
#featPost p {
font-size: 20px;
}
DEMO

Answer 2

h2 and p tag takes full width automatically that's why you are not able to float image.