Question

This is what I am trying to describe as my problem, you can see the white content box just kind of stops:

Link to image as I cant put images on here yet:
http://imageshack.us/photo/my-images/534/43094999.png/

The image loaded for that background apparently isn’t long enough, and I am not sure how to repeat it down so it all flows.

Here is a peak at my css if that helps in solving the problem:

http://pastebin.com/RwcAPjS5

Answer 1

You need to clear floats after the list of boxes. You could do this with an extra element, or by adding the clear CSS property to the next sibling element (note that this stops some margins working).

.clearfix {
    clear:both
}

Then in your HTML (the ul is just a guess as I haven’t seen your HTML):

<ul class="float-boxes">
    <li>...</li>
</ul>

<div class="clearfix"></div>

There’s a good article on floats here, which touches on why this happens.