How to align 3 divs left-center-right? [duplicate]

Question

How can I align 3 divs in one line left-center-right without having to define explicit sizes?

Left should be aligned most to the left edge, and right to the right edge.

The following does not work:

<div style="float: left;">
    left
</div>
<div style="float: right;">
    right
</div>
<div style="margin: 0 auto;">
    center
</div>

Answer 1

Add a wrapper div and give text-align:center

CSS

.wrap{
        text-align:center
    }

HTML

<div class="wrap">
<div class="left">
    left
</div>
<div class="right">
    right
</div>
<div class="center">
    center sdv dg sdb sdfbh sdfhfdhh h dfh
</div>
    </div>

DEMO

Answer 2

Heres an example of how to do this by placing the floats in the correct order.

jsFiddle Example

<div class="square" style="float: left;">left</div>
<div class="square" style="float: right;">right</div>
<div class="square" style="margin:0 auto  !important;">center</div>


.square {
width:50px;
height:50px;
background-color:#ff0000;
text-align:center;
border: 1px solid #000;
}

Answer 3

<div style="width:100%;margin:0 auto; padding: 0">
     <div style=" float:left;width:32%;border: thin solid black">
         left
     </div>
     <div style=" float:left;width:32%;border: thin solid black">
         center
     </div>
     <div style=" float:left;width:32%;border: thin solid black">
          right 
     </div>
 </div>
 <div style="clear:both">
 </div>