Fig 1: wow such colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Sem fringilla ut morbi tincidunt augue interdum. Consectetur purus ut faucibus pulvinar elementum. Dui faucibus in ornare quam. Sodales ut etiam sit amet nisl. Nunc scelerisque viverra mauris in aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur.

Fig 2: wow such colors again

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl condimentum id venenatis.


Floats can be next to each other on the same height.

The css property clear: {left, right, both}; controls how elements should be handled relative to the previous floating element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere.


overflow: auto gives an alternative to clear to control placement of the floats. The red boarder visualizes the size of the <div> block, you can remove the overflow property and observe how the border changes.