How to horizontally center 3 div elements with a dynamic width, first left, second center, third right?

Question

I got three divs with dynamically changed with inside a parent div. I need to align the first div left, the middle one has to be centered with the same padding to the left and right div, and the right one aligned to the right.

Sounds easy, but isn't (at least to me)!

CoSharer/Privat&Offentlich/Abonnenten are the divs

spezzino · Answer 1 · 2013-12-07T17:40:30.110

3

Just set width of each element 33% see jsfiddle demo http://jsfiddle.net/4VaRD/2/

HTML

<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>

CSS

.container{
width: 100%;
}
.left{
background-color: red;
float: left;
text-align: left;
width: 33%;
}
.center{
background-color: green;
float: left;
text-align: center;
width: 33%;
}
.right{
background-color: blue;
float: left;
text-align: right;
width: 33%;
}

edited Dec 07 '13 at 17:40

answered Dec 07 '13 at 17:29

spezzino

664
12
21

Don't forget the alignment required by the OP. – Boaz Dec 07 '13 at 17:30

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

you could use display:flex; see this topic : Why does display: -ms-flex; -ms-justify-content: center; not work in IE10?

or fake it using inline-block and text-align:justify; here a codepen example if you want to include older IEs http://codepen.io/gcyrillus/pen/Babcs :

<div class="justify">
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
  <!--[if lte IE 7]>
     <span class="ie"></span>
  <![endif]-->
</div>

edited May 23 '17 at 12:17

Community

1
1

answered Dec 07 '13 at 17:46

G-Cyrillus

101,410
14
105
129

flex is currently not cross-browser compatible, some browser ( currently ) does not / partially support flex boxing. see: http://caniuse.com/flexbox – nihylum Dec 07 '13 at 17:48
that why i propose text-align:justify that works even in IE5.5 and everywhere else as long as you introduce an empty element instead pseudo-elements :) – G-Cyrillus Dec 07 '13 at 18:29
some English reading to understand what i'm talking about :) http://www.barrelny.com/blog/text-align-justify-and-rwd/ – G-Cyrillus Dec 07 '13 at 19:12

andalusi · Accepted Answer · 2013-12-07T19:24:43.520

Someone did the following fiddle but edited the wrong way! Unfortunately, I don`t know who did this. Maybe spezzino, but I am not sure:

HTML

<div class="wrap">

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

  <div class="right">
    right
  </div>

  <div class="center">
    center
  </div>

</div>

CSS

.wrap{
  text-align:center;
}

.left{
 float: left;
 background:grey
}

.right{
 float: right;
 background:red
}

.center{
 text-align:left;
 background:green;
 margin:0 auto; 
 display:inline-block
}

http://jsfiddle.net/66fCm/136/

Anyway, this works perfect :-) Could anyone mark this post as right answer, because I can`t, due to less reputation.

Works perfect!

score 0 · Answer 4 · answered Dec 07 '13 at 19:14

0

If i understand your problem, you can get the result by using lists.

So just have the content of the left, center and right divs in list items and use display inline and padding like this:

li {
padding: 0 50px 0 0;
display: inline;
}

I have made a fiddle for you. Hope you can use it.

jsfiddle

answered Dec 07 '13 at 19:14

Legarndary

957
2
16
37

Thank you, Legarndary. I answer my own post, unfortunately I can mark it as answer because I have not enough reputation. – andalusi Dec 07 '13 at 19:18
Glad i could help. Did it help with your problem? :) – Legarndary Dec 07 '13 at 19:20

score 0 · Answer 5 · answered Dec 08 '13 at 04:34

0

You can also use a table actually. This would work well because of table behavior.

answered Dec 08 '13 at 04:34

Megaroeny

817
3
14
27

How to horizontally center 3 div elements with a dynamic width, first left, second center, third right?

5 Answers5