CSS: Float Image

Question

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>&copy; Copyright 2014 All rights reserved </p>

<ul>
<li><a href="#"><img src="images/rss.png" width="16" height="16" /></a></li>
<li><a href="#"><img src="images/facebook.png" alt="Facbook" width="16" height="16" /></a></li>
<li><a href="#"><img src="images/twitter.png" alt="Twitter" width="16" height="16" /></a></li>
<li><a href="#"><img src="images/share.png" width="16" height="16" /></a></li>
<li><a href="#"><img src="images/bloggr.png" width="16" height="16" /></a></li>

<li><a href="#"><img src="images/google-plus.png" width="16" height="16" border="0" /></a></li>



</ul>




</footer>


</div> <!--end of wrapper-->

CSS:

div.images{
    position:relative;
    left:0px;
    float:left;
    width:765px;
    margin:0px -5px;
    }

It is hard to tell what you're asking from the pictures. Could you create a http://jsfiddle.net ? — 13ruce1337, May 03 '14 at 22:25

score 2 · Accepted Answer · edited May 23 '17 at 11:50

2

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?

edited May 23 '17 at 11:50

Community

1
1

answered May 03 '14 at 22:25

skooliano

150
1
7

I did a search of this topic, but I couldn't find anything on it. Stackoverflow needs to make it easier to find things – Matthcw May 03 '14 at 22:31

CSS: Float Image

1 Answers1