How to do a `float: left` with no wrapping?

Question

I have a container box1 that has a certain width (which might change depending on its content). That box contains box2 which has a fixed width (it coul

Answer 1

I'd recommend the following:

#box1
{
    position: relative; /* or some other positioned value */
}

#box2
{
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

#box3
{
    margin-left: 10px;
}

If #box2 is of a fixed size, you can simply use a margin for #box3 to prevent its overlapping of #box2, and since it's not positioned, #box1 will grow as #box3 grows.