Newbies, however, find some aspects of DIV is a bit confusing. One of these is positioning various DIV elements in desired layout. Many new developers resort to TABLE element when they don’t get hold of DIV. Although, positioning DIVs is not as straightforward, but once you know how to do positioning –DIV element is much more flexible than TABLE element. Using DIV you can create a layout exactly the way you want, without getting restricted by hard borders or TABLE, TR and TD elements. And moreover, search engines also give more respect to document object model that uses DIV element over the rigid TABLE element. Well, let’s go back to the original question of how to position three (or more than three) DIVs side by side. The trick is very simple. All you need to do is to define width of each div and float it to the left. By default, a DIV element takes 100% of width available in browser window. That is why it does not allow any other element to come in way to its right side. So, you explicitly define width for the div and then float it to the left so that next div can come on the right side of the first div. Here is an example: And here is the result of the above code: DEMO: The most important point in above example is “width: 100px; float:left;” -this is what causes DIVs to go side by side. Some time ago, we had published about another method of placing two div elements side by side –and then positioning them with the help of margin attribute. Using margins, you can place DIVs anywhere on the webpage (and even outside the webpage!). Enjoy!
Δ
