Center parent div with float children

Question

Parent hasnt got a defined width because there are unknown number of children inside.

Why do children fall into new line and how to prevent that? Children need to be on

Answer 1

You should consider using flex-box.

And to answer your question: floated DIVs are not supposed and will not expand their parent's width, as they are 'floating' above the content flow.

Absolute positioned block elements will have an initial width of zero, if not specified otherwise. Thus, they're behaving differently than usual.

The floating elements indeed behave as usual: as the parent element provides not enough width (zero!) to display them all in one line, of course they break to the next line.

.wrap {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 50px;
}
.box {
 width:40px;
 height:40px;
 float:left;
 background:red;
 margin-right:1px;
}

  
0
  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10