elements with adapted width

Question

I'm wondering if it is possible to do this in CSS, without javascript:

A list of N <li> items, with display inline, equal width, and the width of the all equal to the width of the container

I can have 3 <li> items, in this case the <li> width will be 33%, or I can have 4 <li> items, then the li width will be 25%.

Yes. Specify the width for the parent and remove all padding and margin from `li`. — bobek, Nov 18 '11 at 23:06
@bobek: I think you didn't fully comprehend his question. Equal widths, thus each element's width depending on the number of siblings it has. — Chris Morgan, Nov 18 '11 at 23:15
http://stackoverflow.com/questions/7099106/how-do-i-get-the-remaining-divs-to-fill-up-space-horizontally-in-a-parent-div/7099160#7099160 / http://stackoverflow.com/questions/7038592/html-css-create-self-expanding-dynamic-div/7038891#7038891 / http://stackoverflow.com/questions/6310632/html-list-element-sharing-the-parent-width-into-equal-parts/6311029#6311029 — thirtydot, Nov 19 '11 at 01:32

Marc Diethelm · Answer 1 · 2012-08-03T16:30:38.033

This is a perfect example for usage of display: table. Works in modern browsers and IE8+...
Support chart
JSFiddle

css:

ul {
    display: table;
    width: 100%;
    table-layout: fixed; /* optional, for equal spacing */
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    vertical-align: middle; /* or similar, if needed */
}

html:

<ul>
   <li>foo</li>
   <li>bar</li>
   <li>baz</li>
</ul>

andyb · Accepted Answer · 2011-11-18T23:35:28.627

It is possible with CSS3 flex boxes, as demonstrated in this fiddle (for webkit browsers only). There are other browser custom properties that would make this work for recent versions of Firefox and IE. If you need something that works for Opera or older versions of IE then there is a JavaScript library called Flexie which might work.

Credit to The CSS3 Flexible Box Layout (flexbox) for the information on the browser support.

HTML

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

CSS

ul {
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack:justify;
    width:200px;
}

li {
    -webkit-box-flex:1;
    border:1px dashed grey;
    text-align:center;
}

this solution works but I need a cross browser solution, and with table-cell (http://stackoverflow.com/questions/7038592/html-css-create-self-expanding-dynamic-div/7038891#7038891) I can achieve it perfectly as well (cross browser except for IE7...) — tahir, Nov 19 '11 at 10:47

score 0 · Answer 3 · answered Nov 18 '11 at 23:12

You could, with a limited number of possibilities. In CSS3 you can't do it for an arbitrary number of columns, though. You may be able to in CSS4; I don't know yet.

li {
    display: inline;
}

/* 1 column */
li:first-child:last-child {
    width: 100%;
}

/* 2 columns */
li:first-child:nth-last-child(2),
li:nth-child(2):last-child {
    width: 50%;
}

/* 3 columns */
li:first-child:nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):last-child {
    width: 33.3333%;
}

/* 4 columns */
li:first-child:nth-last-child(4),
li:nth-child(2):nth-last-child(3),
li:nth-child(3):nth-last-child(2),
li:nth-child(4):last-child {
    width: 25%;
}

I hope you get the idea. Do you want to do this? I hope not.

score 0 · Answer 4 · answered Nov 18 '11 at 23:33

Assuming the lis are generated from some server-side code, you can use the following "trick":

// in the markup add a class to the UL based on the count of messages
<ul class="col<%= echo count(lis) %>">
...

// and in the CSS
// (notice you have to use display: inline-block, as inline doesn't allow you to
// specify a width)

li { display: inline-block; }
.col3 li { width: 33.3%; }
.col4 li { width: 25%; }
// etc

Simon · Answer 5 · 2012-04-19T13:33:25.210

Make a standard left-floated list and you can (or must) set display to inline to avoid IE6 doubling a possibly existing margin-left.

Assuming you have a static page, you can set your list up like this:

HTML:

<ul class="listLR col3 clearfix">
  <li></li>
  <li></li>
  <li></li>
</ul>

and CSS:

listLR {
  width: 100%; // important for IE!
}

listLR > li {
  display: inline;
  float: left;
}

col3 > li {
  width: 33.33%;
}
col4 > li {
  width: 25%;
} //and so on

The use of a clearfix-class is demonstrated here

elements with adapted width

5 Answers5

HTML

CSS

Linked