Image is overlaping in div - html

Question

Hi I was adding a picture but it always over lap.
I want the div to automatically resize when the inner div is been resize example an image when a person upload it resize on that picture so it fit in the div box
<div class="MainBox">
<div class="FirstChildBox">
<div class="imageBox">
<img src="textimage2.jpg"/>
</div>
<div class="rateImage">
<div class="arrowupdownrate">
<div class="upArrow"><img src="up_down.png" /> </div>
<div class="rateNumber"><a>112320</a></div>
<div class="downArrow"><img src="red_down.png" /></div>
</div>
</div>
<div class="infoOfImage">
<div class="textImage">
<a href="#">Just a picture
</a>
</div>
<div class="Thumbsups">
<div class="textparagraph"><p>asdasd</p></div>
<div class="fb-like" data-href="http://teamfirstdragon.com/" data-send="true" data-width="450" data-show-faces="false"></div>
<div class="fb-comments" data-href="http://teamfirstdragon.com/" data-width="450" data-num-posts="4"></div>
</div>
</div>
</div>
<style>
.MainBox {
margin:0px auto;
border:1px solid #f00;
width:900px;
}
.MainBox .FirstChildBox {
margin:10px;
height:240px;
width:880px;
}
.MainBox .FirstChildBox .rateImage {
float:left;
margin-left:5px;
margin-right:5px;
width:65px;
height:239px
}
.MainBox .FirstChildBox .rateImage .arrowupdownrate {
margin-top:40px;
}
.MainBox .FirstChildBox .rateImage .arrowupdownrate .upArrow {
margin-left:7px;
cursor:pointer;
}
.MainBox .FirstChildBox .rateImage .arrowupdownrate .rateNumber {
margin:5px;
width:52px;
height:20px;
text-align:center;
}
.MainBox .FirstChildBox .rateImage .arrowupdownrate .rateNumber a {
font-family:'Comic Sans MS',Arial,Calibri;
}
.MainBox .FirstChildBox .rateImage .arrowupdownrate .downArrow {
margin-left:7px;
margin-top:10px;
cursor:pointer;
}
.MainBox .FirstChildBox .imageBox {
float:left;
width:350px;
}
.MainBox .FirstChildBox .imageBox img {
width:350px;
}
.MainBox .FirstChildBox .infoOfImage {
float:right;
}
.MainBox .FirstChildBox .infoOfImage .Thumbsups {
border:1px solid #ff6a00;
width:450px;
height:204px
}
.MainBox .FirstChildBox .infoOfImage .Thumbsups .fb-comments {
position:relative;
}
.MainBox .FirstChildBox .infoOfImage .Thumbsups .fb-like {
position:relative;
}
.MainBox .FirstChildBox .infoOfImage .textImage {
text-align:center;
width:450px;
}
.MainBox .FirstChildBox .infoOfImage .textImage a {
position:relative;
font-family: 'Comic Sans MS',Calibri,'Times New Roman';
text-decoration:none;
font-size:25px;
font-weight:bold
}

Answer 1

Try adding the following to the CSS
.imageBox { height: 100%; }
.imageBox img { height: 100%; }
This will cause the .imageBox element's height to be 100% of it's parent and for the img element within the div.imageBox to adapt as well.

Answer 2

Did you try height:auto; in .MainBox class?

Answer 3

You had a fixed height on your first child box, I had to add a clear:both at the end of your wrapper for it to detect the height (you can also you the clear fix hack)
http://codepen.io/anon/pen/eGlfa