How to align 3 divs left-center-right?

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>

When I do this, usually at least 2 from the 3 have sizes I can specify, and I just have the third adjust to the other two — ppeterka, Feb 28 '13 at 11:38
I don't understand what's the problem with the code you wrote. it does just what you described: http://jsfiddle.net/tagCs/ — Moshe Shaham, Feb 28 '13 at 11:42

score 16 · Accepted Answer · answered Feb 28 '13 at 11:39

16

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

answered Feb 28 '13 at 11:39

Sowmya

26,179
21
93
129

I have apply text-align: center to wrapper with 3 images, can someone explain why this works ? – Marian Pavel Feb 12 '16 at 11:08

zkanoca · Answer 2 · 2013-02-28T11:44:28.307

2

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

edited Feb 28 '13 at 11:44

answered Feb 28 '13 at 11:33

zkanoca

9,174
9
44
90

Did you try this? It does not work for me: http://jsfiddle.net/eqAyg/ – membersound Feb 28 '13 at 11:37
I have typed accidentally float property into main div's style. It should be in each inner div. – zkanoca Feb 28 '13 at 11:45

chriz · Answer 3 · 2013-02-28T11:44:22.533

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

edited Feb 28 '13 at 11:44

answered Feb 28 '13 at 11:38

chriz

1,560
19
27

score 0 · Answer 4 · answered Feb 28 '13 at 11:41

0

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>

answered Feb 28 '13 at 11:41

Rohan Kumar

39,838
11
73
103

score 0 · Answer 5 · answered Feb 28 '13 at 11:45

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

How to align 3 divs left-center-right?

5 Answers5