Arrange 2, 3 or Many DIVs Side by Side with CSS Float

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:

<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>

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 sideand 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!

28 thoughts on “Arrange 2, 3 or Many DIVs Side by Side with CSS Float”

  1. How to put frame tag and form tag side by side. I tried to use float, but it did not work. I put both the tags inside the div tag and then tried but still, it did not work. How to do this?

  2. Hi Lalitji, can you explain me that how can set div as you shown above diagram in this article as page layout – (white boxes). – div sizes (may be height) varied but comes one after one following each other. eg. ‘pinterest’ website.

  3. I am new to HTML and was searching how to place 2 tables side by side. Your solution of placing 2 DIVs with inline CSS was simple and working. Thank you.

  4. Thanks a million times Kumar. I am quite grateful for your support. i don’t know what happened i arranged some codes inculcating the div layout codes you provided and some of mine for you to help. it’s been showing waiting for your attention but is now off the guild without any comment from you, are you still going through it or did you delete the codes?

    1. Hi Lawrence, I saw that code. But I realized that there was a lack of concept in that. See, you need to take tutorials in web development. Even if I correct that code, your effort will not go far in developing a website because of lack of basic understanding. Please read tutorials and do research on your own. More experienced people should be approached only after doing an exhaustive effort. This is how online learning works. All the best!

  5. Good day Kumar. I noticed that the code you provided for me, container style doesnt last ‘;’ header has last ‘;’ left, content and right doesn’t have last ‘;’ but footer has last ‘;’ . Even in earlier codes you provided i noticed that too is it deliberte or just a slight ommission? if that is correct what rule guides one to know when to put last ‘;’ and when not. Since such a small ommission or commion may make the whole set of codes not to be executed by the browser. Thanks again Kumar.

    1. Hi Lawrence, the last semi-colon in the style rule is optional (however it is good practice to put the last semi-colon as well).

  6. One more thing Kumar. I really await your response. As a matter of fact this would have or will resolve my headache about arranging my home page into header left sidebar, content, right sidebar and footer. I will deeply appreciate it if you give me simple div codes placing elements into the five segments with result display. Thanks.

    1. You can use the following code for creating a basic page layout using five DIV elements:

      <div id=”container” style=”background: #ccc; width: 1000px”>
      <div id=”header” style=”background: #f00;”>Header</div>
      <div id=”left” style=”background: #0f0; width:200px; float:left”>Left</div>
      <div id=”content” style=”background: #00f;width:600px; float:left”>Content</div>
      <div id=”right” style=”background: #0f0;width:200px; float:left”>Right</div>
      <div id=”footer” style=”background: #f00;”>Footer</div>
      </div>

  7. i am a bit confused i thought what you treated is placing divs side by side from left to right, but your displayed result shows a vertical stack but explanation is simple straight to point.

    1. Vertical stacking of DIV elements will happen if the available screen width is less than the width required for DIVs to display side by side. If available screen width is less, then the right DIV will go towards bottom. This is very useful in today’s multi-screen and multi-device environment.

  8. How would I have two divs side by side, unless the screen is too small, in which case they sit on top of each other.

    What I mean is, I want the divs to sit side-by-side on a computer screen, and I can do that. But on an iPhone screen, I want one to then be on top of the other one, because there isn’t space for them to be side-by-side.

    1. Hi Jro, if you do not have enough space on screen, the obvious layout of divs is on top of each other. You may consider decreasing the size of DIV elements in proportion with the available screen size.

  9. Great stuff here. You are truly talented. Don’t forget the sum of the inner div’s widths and margins must be less than the outter div.

      1. how we can arrange 3 columns with background colors side by side with out making 3 separate div for each column …. using
        can you please send that coding?

  10. That’s great Lalit. But making the code impossible to copy is a bit extreme! How are we supposed to “Enjoy” if we can’t use the code?

Leave a Comment

Your email address will not be published. Required fields are marked *