How come my float elements aren't within their parent

Question

So basically i have this wrapper div, and all the elements inside it are floated elements. Only thing is the border of the wrapper div does not include the floated elements

Answer 1

You need to "clearfix" the container div.

Floated elements are not considered when calculating the dimensions of a container, however there are several workarounds to get what you want.

The Simplest

Just add a div like this one as the last child in your container div:

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

As @Pekka comments there are many other ways to achieve the effect (without extra markup) listed in this SO question:

What methods of ‘clearfix’ can I use?

Answer 2

Because the point of float is to allow you to do things like

Ed Eliot describes a large collection of different ways to make a container expand to contain it's floating children. I generally recommend setting overflow: hidden on it (to establish a new block formatting context).