Question

I’ve run in to this problem before, but i can’t remember what the question was called and i can’t find a relevant solution, so here we go again.

I need to float two boxes to the left. These boxes have a static width, the same width as the parent. What happens now is that the boxes stack beneath eachother instead of floating, because the parent isn’t wide enough.

Here is a (rough) illustration of what i want:

https://i.stack.imgur.com/xwe7G.jpg

Any ideas?

Answer 1

I updated your code using white-space: nowrap along with display: inline-block. If you really need to do it with float: left, do what @Kurt suggested since it should work. But I really believe inline-block is the right approach here.

Check the Fiddle or look at the code here:

.parent {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0;
}

.child {
    display: inline-block;
    width: 200px;
    font-size: 1rem;
}