Dynamic width with multiple elements

Question

I'm trying to find a pure CSS way to have 1 or more elements inline and have them adjust their width to fill the container e.g.

1 element

[------]

2 elements

[---***]

3 elements

[--**..]

Is this achievable through pure CSS?

can you share what you have tried?

Phlume
– Phlume

2014-10-10 14:51:47 +00:00
Commented Oct 10, 2014 at 14:51 — Phlume
– Phlume, Commented Oct 10, 2014 at 14:51

LorDex · Accepted Answer · 2014-10-10 14:50:39Z

1

use display: table on parent, and display: table-cell on children. then you can add as many inner div's as you wish. Like this:

HTML

<div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
</div>

CSS:

.container {
 display: table;
    width: 500px;
    height: 300px;
    outline: 1px solid red;
}

.inner {
    display: table-cell;
    outline: 1px solid blue;
}

here's fiddle: http://jsfiddle.net/w8p2nj9z/

answered Oct 10, 2014 at 14:50

LorDex

2,6382 gold badges22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic width with multiple elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related