A div#wrapper holds this example content which is 800px in width. I have created two divs coloured Green and Purple and because they are block elements, they flow one after the other in my wrapper. If I would like to have both divs side by side, I would need to set widths for both divs and make sure that the total width of both divs do not exceed the total width of my div#wrapper. I would then float both divs left so that they position themselves side by side.

* If both div's width in total, are greater than the width of the space they are trying to squeeze into, the divs will not position themselves side by side!

---

Div 1 and Div 2 following normal document flow as block elements,

---

Both divs have been reduced in width so that they can fit side by side into the 800px wide div#wrapper.

---

I need to float both divs left, or Div 1 left and Div 2 right, so that they position themselves side by side.

* Apply this method if you are trying to position your elements side by side using float.