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

Question

This question already has answers here:
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 8 years ago.
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>

Answer 4

Try this
CSS
div{width:33%;}
HTML
<div style="float: left;border:1px solid red;">
left
</div>
<div style="float: right;border:1px solid green;">
right
</div>
<div style="margin: 0 auto;border:1px solid blue;">
center
</div>

Answer 5

It's not possible actually do it, without knowing about the content and layout pattern. But for a begining point, you can try this:
HTML:
<div class="clearfix holder">
<div class="column left">
Some Contents Here...
</div>
<div class="column middle">
Some Contents Here...
</div>
<div class="column right">
Some Contents Here...
</div>
</div>
CSS:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.holder{
text-align:center;
}
.column{
display:inline-block;
*display:inline;
*zoom:1;
width:auto;
}
.left{
background-color:#ff0;
float:left;
}
.middle{
background-color:#f0f;
margin:0 auto;
}
.right{
background-color:#0ff;
float:right;
}
DEMO