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

The content of divTwo is not moving independently. The content is text, so it's rendered in a line box.

Now while unfloated, uncleared blocks ignore the presence of floated elements that precede them, the line boxes that they contain don't. The line boxes will avoid the floated element and go either alongside the floated element or, if there's no space for them there, underneath the floated element.

In your example, there is no space alongside, so the text has gone underneath the floated element. But since you've set a fixed height for divTwo, there's not enough space underneath and yet inside divTwo for the line box either. So the text content overflows divTwo, hence the text appears without divTwo's background behind it.

Answer 2

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;

}

Answer 3

This is something quite frequently met in just simple HTML. In you current code, you are not using any containers, wrappers or rows. This leads for the elements to overlap, if you want them not to overlap, you should give them some positioning or padding. In the provided fiddle, I have added a padding of 50 px for the divTwo in order to increase it's box show it is seen better.

The main idea is that you never start simply writing code but carefully think about the positioning of each element on your webpage. A good practice would be to learn how to "stack" elements( That's how I call it, the term might not be correct). Another thing is that there are some certain front end frameworks which could teach you better by example how to do this.

Bootstrap, Zurb Foundation (But Bootstrap...I'm not sure how many people use Zurb)

Here's the JS Fiddle to see how exactly the div has changed:JS Fiddle

Answer 4

Alternative to @jpat827 answer would be to either set div two's clear property to left or add an empty div after div one and set it's clear property to left. What

The clear property, if there is no space left for the unfloated element, prevents the unfloated element from going under the floated element.

When you clear the div two to left, then what it really does is that it places div two below the floated element.

let's say, div one was floated to right, then you would have to clear div two to the right, in order to bring it below div one.

If, there were three divs, out of which two were floated to left and right, then the clear property for the third unfloated div must be set to both so that it can clear past elements floated in either direction.

I hope this was helpful.

Thank You

Answer 5

Like @ZobmbieChowder said, the logic of CSS float property is that you have a huge box which contains two smaller boxes, and now you want one is located on the left and another on the right. If you don't have the huge box first, the complier doesn't get human's logic which one shall be the left or right. It only makes sense for machine that you "define" a container first, then talk about its element position left or right.