Display: table-cell width of box (percentage)

Question

I have this CSS code:

section.products {
    display: table;
    width: 100%;    
    table-layout: fixed;
}

section.products > article {
    display: table-cell;
    width: 33%;
}

This does not set the width correctly (the width of every article is set automatically to fit all article elements to one row). But when I set <article style="width: 33%;"> (inline declaration), the width is right. What is wrong? Thanks for any advice.

EDIT (DEMO): https://jsfiddle.net/Lt822wkq/

Answer 1

The table layout works if you have three child elements as shown below.

If you only have one child element, it will expand to fill up the entire available width, even if you apply an inline style for the width, see Examples 2 and 3.

However, if you set display: block to the single child article , then the width will be 33%, but that is because the element in no longer behaving like a table cell.

 section.products { display: table; width: 100%; table-layout: fixed; border: 1px dotted gray; } section.products > article { display: table-cell; width: 33%; border: 1px dotted gray; } section.products > article.blocky { display: block; } 

 <section class="products"> <article>Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> <article>Article Two Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> <article>Article Three Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> </section> <h2>Example 2</h2> <section class="products"> <article>Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> </section> <h2>Example 3</h2> <section class="products"> <article style="width: 33%;">Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> </section> <h2>Example 4</h2> <section class="products"> <article class="blocky" style="width: 33%;">Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article> </section> 

Answer 2

When you set article {width: 33%;} in the stylesheet that applies to every single <article> element. However if you use inline style <article style="width: 33%;"> that applies to that element only.

In your demo, there are 4 table cells total, and you set each to 33%, that won't work correctly because the total width exceeds 100%.