How to float 3 divs side by side using CSS

Question

I know how to make 2 divs float side by side, simply float one to the left and the other to the right. But how to do this with 3 divs or should I just using tables for this purpose?

Thanks.

Answer 1

float them all left

make sure a width is specified that they can all fit in their container (either another div or the window), otherwise they will wrap

Answer 2

you can float: left for all of them and set the width to 33.333%

Answer 3

Just give them a width and float: left;, here's an example:

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>

Answer 4

It is same way as you do for the two divs, just float the third one to left or right too.

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

Answer 5

Sounds to me like you are In Search of the Holy Grail!

Humor aside, the article I have linked to is one that I believe every front-end developer needs to read and understand.

Answer 6

I usually just float the first to the left, the second to the right. The third automatically aligns between them then.

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>