CSS: Float Image [duplicate] - html

Question

This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
Why does the float:left and float:right element cause my web page to become squashed?
This is what happens when I try to float:left or float:right.
http://prntscr.com/3fx03d
The page seems to forget the images take up space on the page
The only way to fix this is to use "<p>...</p>" at the very bottom of the images in the HTML Code then it will look like this.
http://prntscr.com/3fx13l
What is going on here?
Yes I have ensured to specify the size of the images beforehand.
HTML
<div id="main-content">
<h2>Images</h2>
<div class="images">
<img src="images/Home_Pic1.jpg" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic2.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic3.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic4.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic5.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic6.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic7.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic9.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic8.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic10.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic11.png" alt="Motivational Image" width="250" height="150">
<img src="images/Img_Pic12.png" alt="Motivational Image" width="250" height="150">
</div>
<p align="center">...</p>
</div>
<footer>
<p>© Copyright 2014 All rights reserved </p>
<ul>
<li><img src="images/rss.png" width="16" height="16" /></li>
<li><img src="images/facebook.png" alt="Facbook" width="16" height="16" /></li>
<li><img src="images/twitter.png" alt="Twitter" width="16" height="16" /></li>
<li><img src="images/share.png" width="16" height="16" /></li>
<li><img src="images/bloggr.png" width="16" height="16" /></li>
<li><img src="images/google-plus.png" width="16" height="16" border="0" /></li>
</ul>
</footer>
</div> <!--end of wrapper-->
CSS:
div.images{
position:relative;
left:0px;
float:left;
width:765px;
margin:0px -5px;
}

Answer 1

If I am understanding your problem correctly, in a nutshell, floated elements do not add height to the container. There are a number of ways to correct this behavior. Float the parent element, specify overflow: hidden on the parent or use a clearfix hack http://css-tricks.com/snippets/css/clear-fix/.
There is a pretty indepth article on this here at stackoverflow:
Why doesn't the height of a container element increase if it contains floated elements?