Div not wrapping round content

I am only on the tribute page but I have hit an issue that I don’t seem to be able to overcome. I have a div that I want a list and an image in. I have written it as I would expect it to work - underneath the preceeding div with other divs inside it but it doesn’t work as I’d expect. I don’t know whether its because I cant have a list element inside a div or whether its because i’m trying to float 2 divs inside it at 50% each (it didn’t work at 45% either)

I have copied the code to codepen so its easier to see what I mean, its just a crappy tribute page - i figure the content is much less important than laying it out.

I wanted to have 4 distict divs the head, the bio, the list+ picture and a foot area

I have put all 4 divs in as I’d expect them to be but this problem div has stopped the flow of the site.

Any help appreciated.

My advice would be not to use floats to do this but some other method, such as flexbox or grids. But if you did want to continue using floats then the solution is to add overflow: auto; to #statsFacts.

Back in the day, before we had all these fancy layout mechanisms, floats were essential. But nowadays? I can’t remember the last time I used a float. You can get away with it on a simply layout like this, but with more advanced layouts you will drive yourself crazy trying to get them to work properly.

I agree there is no reason to use float here.

Some more information about why it happens and an example of using a clearfix class (or just use overflow hidden)

MDN: clear

If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, you need to self-clear its children. This is called clearfix, and one way to do it is clear a replaced ::after pseudo-element on it.

css-tricks: clear-fix

.clearfix::after {
  content: "";
  display: table;
  clear: both;

<div id="statsFacts" class="clearfix">

Thank you both for the prompt and informative responses