Why does the background of a floated element appear to move independent of the content?

Question

In the CSS code below, it appears that the background of divTwo has moved behind divOne. But the content of divTwo appears to have been le

Answer 1

From Mozilla provided Float Documentation

How floats are positioned

As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.

So I imagine when you declare float for divOne but not divTwo, then divTwo is following the normal flow of the document which is the same position as divOne.

You may also find Documentation for CSS Display useful.

If you do want these inline, but do not want to declare float for divTwo you can use:

#divOne {
width: 300px;
height: 100px;
background-color: yellow;
float:inline-start;
}

#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;

}