Show, in percentage, the width of the box when set as a table-cell

I'm struggling with this CSS code:

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

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

The issue I'm facing is that the width is not being set correctly. Each article element's width is automatically adjusting to fit all articles on one row rather than following the specified 33% width rule. However, when I use

<article style="width: 33%;">
as an inline declaration, the width displays properly. Can anyone advise on what might be causing this problem? Thank you for any insights.

Check out the demo here: https://jsfiddle.net/Lt822wkq/

Answer №1

If you have three child elements, the table layout will work as intended.

When there's only one child element, it will expand to fill the entire available width regardless of any inline styling applied, as seen in Examples 2 and 3.

However, setting display: block for the single child article will result in a width of 33%, but this is because the element is no longer acting 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

Setting article {width: 33%;} in the stylesheet will apply to all <article> elements, whereas using inline style

<article style="width: 33%;">
will only affect that specific element.

If there are a total of 4 table cells in your demo, and each one is set to 33%, it will not display correctly because the combined width exceeds 100%.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in THREE.js: Failed to retrieve object at http://192.168.8.104:8080/[object%20Object] (Error code: 404) - Module: three.module.js

During my attempt to create a text loader in THREE.js, I encountered an error instead of getting the expected text output. three.module.js:38595 GET http://192.168.8.104:8080/[object%20Object] 404 (Not Found) I made various efforts to resolve this error ...

Removing a style attribute by adding a new class

Currently, I am in the process of designing a website prototype using Twitter Bootstrap. One issue that I have encountered is that when I use the hero-unit class, any color attributes specified in the h1 tags are ignored and only displayed in black. This ...

I'm having trouble with certain JavaScript functions on my website - some are working fine, but others aren't. Any suggestions on what I should do

I just finished developing a calculator using HTML, CSS, and Javascript. It works flawlessly for all numbers 1 through 9 and the operators +, -, *, /, and %. However, I am facing issues with the number 0, C, and = buttons not functioning properly. Upon in ...

Multi-tier Dropdown with Dynamic Size Adjustment

I am attempting to adjust the size of a div container within a dropdown menu so that it properly accommodates the text inside. <div class='dropdown'> <button class ="dropbtn"><b>Hover!</b></button> <div c ...

Using a `right: 0` value will not be effective when using absolute positioning

Currently, I am in the process of developing a website utilizing Bootstrap 3.3.6. After going through a tutorial on how to create a responsive banner slider, I found this resource helpful: http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel- ...

Looking for a way to customize it using @emotion/styled? Dealing with the deprecated makeStyles from MUI problem?

I have been working on setting up my styling using @emotion since makestyles were removed in React 18. Despite making changes as per my research, I am not seeing any updates reflected on my page. The expected result looks like this: https://i.stack.imgur. ...

Using React Native to create a concise text component that fits perfectly within a flexbox with a

Within a row, there are two views with flex: 1 containing text. <View style={{ flexDirection: "row", padding: 5 }}> <View style={{ flex: 1 }}> <Text>Just a reallyyyyyyyy longgggg text</Text> </View> ...

Ensure that two div elements expand to occupy the available vertical space

I am looking to create a layout similar to the following: |---| |------------| | | | b | | a | |____________| | | |------------| |___| |______c_____| Here is the code I have so far: <table> <tr> <td class="leftSid ...

What is the best way to vertically align elements in HTML, CSS, and Bootstrap?

https://i.sstatic.net/rhWmI.png Vertical alignment is required for all the bold fields. Below is the code snippet I attempted: If there is overflow in text (non-bold), it should display as ... I made attempts with CSS and bootstrap. ...

Maintain hover effect of main menu on sub-menu in CSS3 flip dropdown menu

Check out the fiddle I created for my query https://jsfiddle.net/e7te8hf1/ <section id="action-bar"> <div id="logo"> <a href="#"><img src="img/logo.png"></a> </div><!-- end logo --> <nav class="navbar navigat ...

Appearance with grey background color instead of transparency

After attempting to remove the background-color attribute, I noticed that the background remains a shade of grey instead of becoming transparent. Here is the code snippet: CSS: #contact-form button[type="submit"] { position: absolute; width: 100 ...

Space around the flex container

I am facing an issue with a flex display that splits the screen into two sections: one for login information and the other for a background picture. When setting up the flex layout, I notice unwanted margins on both sides (highlighted as orange bars in the ...

Issue with element alignment using CSS increments

I'm confident that this code should be functioning properly, but for some reason it's not. I feel like there must be a small detail that I'm overlooking: Markup: <section id="content"></section> Styling: #content { positi ...

Exploring the capabilities of Angular 9 with mat-table's multiTemplateDataRows feature to enhance the user experience by enabling simultaneous hover effects on multiple rows

Seeking advice as a newcomer to Angular, I am encountering an issue with mat-table and multiTemplateDataRows. Essentially, each element from my data source is displayed on two rows in the table. When I hover over row 1, only row 1 is highlighted, and the s ...

Unlocking the hidden value with Python Selenium from an unselectable element

I am attempting to retrieve a value of 570 using Python Selenium. ... <div _ngcontent-lci-c225="" class="mr-4 bd-highlight"> <span _ngcontent-lci-c225="" class="clickable ng-star-inserted" style="ma ...

Eliminate any unnecessary gaps that may exist between the cards within the deck

Utilizing Jinja2 with Flask to render a list on an HTML page, I aim to produce card decks containing data from the list using a Jinja2 loop. This is my current HTML code: <div class="container-fluid"> <div class="row"> <div clas ...

Is the positioning of 'clear:both' influenced by external floated elements?

I have 2 divs. One is styled with float:left and has a width of 100px, making it red. The other div is green and has a margin-left:101px, but is not floated. Within the green div, I inserted another div with two floated elements: The outcome is as follo ...

Assign ratings to values based on stars

I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, t ...

Issue with smooth scroll feature not functioning properly

Currently, I am facing an issue with the smooth scroll feature on my website. Although I have implemented a to top arrow for users to move back to the top section of the page, the scrolling is not as smooth as intended. The JavaScript code I used for achi ...

Creating responsive CSS layouts for various device sizes

My webpage features a form with a prompt for the input box, followed by the input box itself. I want to implement two different layouts based on the device accessing the page. For cell phones, I want everything stacked vertically. However, for computers, ...