Arrange 2, 3 Or Many DIVs Side By Side With CSS Float - TechWelkin

DIV element in HTML is used for creating floating layers. In modern web design and development, thought of a website without DIV elements is almost non-existent.

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.

Grid layout can be easily made with CSS as well.

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:

[html] <div style="width: 100px; float:left; height:100px; background:magenta; margin:20px">DIV 1</div> <div style="width: 100px; float:left; height:100px; background:green; margin:20px">DIV 2</div> <div style="width: 100px; float:left; height:100px; background:cyan; margin:20px">DIV 3</div> [/html]

And here is the result of the above code:

DEMO:

DIV 1 DIV 2 DIV 3

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!