CSS将div定位到内容中

Question

Been doing little work on my site and currently, I'm having issues with positioning. I don't know why, but my divs seem to be out of the content for some reason. That's how it looks:

And the way its defined:

float: left;
font-family: 'Josefin Sans', sans-serif;
margin: 10px;
width: 100px; 
height: 100px;
background:#FFFFFFFF; 
text-align: center;
display: inline;
border: solid 2px #0047b3;
font-size: 28px; 

The way content is defined:

#content { background-color:#6699ff; margin: 5px; border: 2px solid #0047b3; padding-left: 10px;}

I just want to get my created div into the content div, but somehow it doesn't work.

Answer 1

This is happening because of 'float: left'. Floating an element takes it "out of the flow" of the document. You might have better luck by removing the float property and making them 'display: inline block'.

Answer 2

you may add an extra <div class="spacer"></div> as the last child and use

.spacer {
    clear:both;
}

more info can be found here How do you keep parents of floated elements from collapsing?