1

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:

enter image description here

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.

Gholamali Irani
  • 4,391
  • 6
  • 28
  • 59
andrzej andrzejewski
  • 13
  • 4
  • [MCVE] are very helpful for us to assist you here. We get more information with HTML. Make sure to edit changes into your question. Don't add them as answers or comments. – Jon P Jan 16 '18 at 01:01
  • Possible duplicate of [What methods of ‘clearfix’ can I use?](https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use) – Jon P Jan 16 '18 at 22:20

2 Answers2

0

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'.

Soren Baird
  • 269
  • 2
  • 11
0

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?

Mohannad Hisham
  • 56
  • 6