CSS - Keep Text Under An Image

I'm trying to create a simple gallery of pictures and I was told to use 'float: left', but when I do all the text from my footer shoots up to the first image. I've been searching a

Solution 1:

Floating an element takes it out of the 'flow' of the page. Your footer shoots up because it is taking no notice of floated elements. This is where clear comes in, it specifies whether the element can be next to (or in line with) floated elements. Add clear:both to your footer, and you should get the result you wanted:

#footer {
  border-top: 1px solid;
  margin-left: auto;
  margin-right: auto;
  width: 700px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  white-space: nowrap;
  clear:both;
}

JSFiddle

Solution 2:

you need to clear any floats. So after the floated elements you can add this class to your footer and to your the parent of your floated divs, #txt1, .clearfix:after:

.clearfix:after {
   clear: both;
   content: ".";
   display: block;
   height: 0;
   visibility: hidden;
}

or you can just add a div with clear:both above your include of footer.php:

<div style="clear:both;"></div>

<?php
include('includes/footer.php');
?>