CSS - Keep text under an image

Question

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 sear

Answer 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