This paragraph is floated to the left. Notice how the text from the other paragraph flows around it.
This is a basic paragraph element. To make the example easier to understand all padding and margins have been set to 0 so that there is no confusion as to where things are alinging. The red lines indicate the borders of the line boxes contained within the paragraph element. The background color of this paragraph shows that the block is created in the normal flow, but line boxes re moved to make room for the floated element.
This paragraph is floated to the left. This is just some extra text to show that when this floated box's size excedes the size of the container element the container element does not grow to contain it (except in IE/Win). In IE/Win boxes are incorrectly made to be as tall as they have to be to fit the content.
This is a basic paragraph element. To make the example easier to understand all padding and margins have been set to 0 so that there is no confusion as to where things are alinging.
You can see that subsequent block boxes contine to position themselves in the normal flow while line boxes contained within them continue to flow around the floated elements.
This paragraph is floated to the right. Notice how the text from the other paragraph flows around it.
This is a basic paragraph element. To make the example easier to understand all padding and margins have been set to 0 so that there is no confusion as to where things are alinging. The red lines indicate the borders of the line boxes contained within the paragraph element. The background color of this paragraph shows that the block is created in the normal flow, but line boxes are moved to make room for the floated element.
This paragraph is floated to the right. This is just some extra text to show that when this floated box's size excedes the size of the container element the container element does not grow to contain it (except in IE/Win). In IE/Win boxes are incorrectly made to be as tall as they have to be to fit the content.
This is a basic paragraph element. To make the example easier to understand all padding and margins have been set to 0 so that there is no confusion as to where things are alinging.
You can see that subsequent block boxes contine to position themselves in the normal flow while line boxes contained within them continue to flow around the floated elements.