I am seeking a solution to make all child divs fill the full height of the parent div without specifying a fixed height. Ideally, I would like them to adjust to the height of the tallest child div. However, if the only way to achieve this is through JS, I am open to setting a fixed height instead.
To demonstrate the issue, I have prepared an example on jsbin.
Check out the display: table property. You can create table-like behavior in CSS, including dynamic elements with equal heights. By the way, this is the correct way to use tables, not the wrong way.
Per the suggestions of @Ria Elliger, utilizing a table-layout can achieve the desired result.
It is advisable to create an additional element for the table. This will enable you to center align the table, as illustrated in your image:
<div class="con">
<div id="table">
<div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
<div>sdfkjsd kfjsdf sdfj sdfj sdlk fslkd fskldf sdf sdf sd f</div>
<div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
<div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
<div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
</div>
</div>
Each div within the table functions as a table-cell:
#table > div {
/*display: inline-block;*/
border: 1px solid gray;
width: 50px;
display: table-cell;
vertical-align: bottom;
}
By default, the table-cell is aligned to the top. To make it extend to the bottom, you can use vertical-align: bottom;
Now, you can vertically center align the table within its parent element:
#table
{
display: table;
margin: auto;
border-spacing: 5px 0;
}
The usage of border-spacing allows for clear separation between each cell, applied to the left and right sides of each cell.
Here is the CSS code you can use for styling the HTML:
.container
{
border: 1px solid gray;
text-align: center;
width:400px;
height:160px;
}
.container div {
display:inline-block;
border: 1px solid gray;
width: 50px;
height:100%;
position:float;
overflow:hidden;
}
Below is a snippet of code that you can utilize for a nested DIV element:
.content div {
display: table-cell;
border: 1px solid gray;
width: 50px;
}
When running the app.js file for Node.js, I am trying to ensure that the '/' route is loaded first. This route handles authentication and then redirects to the index.html file. However, I am encountering an error because the program cannot find ...
I have been exploring the use of stacked icons with fontawesome, following a helpful blog post by Dave Gandy. Although stacking is working well, I am facing an issue aligning a stacked icon with a non-stacked icon (which is fa-5x). It's challenging t ...
[![enter image description here][1]][1] There seems to be an issue with the Pie-Chart where the Slice color and the Legend color do not match when the color is set using className. This problem does not occur with some other charts. If you look at the co ...
I have two files, one HTML and one CSS. The HTML file contains the following code: <div class="app"> <div class="header"></div> <div class="main"> <div class="container_1"> ...
I am attempting to incorporate a Math operation in an HTML page, but unfortunately it is not functioning as expected. Here is the code snippet that I have experimented with. Is there any solution to make this code operational? HTML code <div> < ...
My mission is to place an <img> with text blocks above and below it inside a container of specified height. The exact heights of the text blocks and image are unknown. After extensive searching, my colleague provided a useful solution by using the ...
I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...
I have designed a blade with a signboard containing multiple columns, each displaying its name, color, and assigned cards (screenshot). To enable sorting of these cards, I added an icon next to each column title. My goal is to allow users to select sorting ...
I am facing a challenge in placing 2 containers side by side. These containers have a thick white border and are initially hidden until a click event reveals them. The containers are given a class of "hidden". However, in order to align the div containers ...
Let's say there is a div element on the page like this: <div class="center"></div> The CSS style for this div may look something like this: .center{ background:red; position:absolute; left:50%; top:50%; margin-left: ...
Is there a way to redirect a website user back to the login page if they try to access a secure page without logging in first? I'm looking to implement this using JavaScript and cookies. Any suggestions or ideas on how to achieve this seamlessly for t ...
Similar Question: Is Firefox compatible with position: relative on table elements? Check out this example: a full-width menu formatted as a table with ul dropdown menus. Everything works as expected in IE and Opera, but in Firefox the dropdown uls ex ...
I'm having trouble with my footer always being covered by dynamic content on my page. How can I adjust the CSS to make sure the footer stays at the bottom and adjusts to the size of the content? Here's the current CSS code for the footer: div ...
Just starting out in the world of programming and attempting to create a memory game. I've designed 5 unique flags using CSS that I want to use in my game, but I'm feeling a bit stuck with where to go next. I understand that I need some function ...
I am currently working on an Android 2.2.1 app using a webview, and I am facing challenges with implementing a file upload feature. Despite having a standard file upload form, the browser box does not pop up when using webview. However, everything function ...
Despite reading numerous posts on this problem, none have provided a solution for me! Some suggest that using session_regenerate_id(true); before session_start(); could be causing the issue. However, this is not applicable to my code. Others recommend remo ...
Currently, I am working on a responsive layout using Bootstrap 4 with two columns. Each column contains a total of 9 divs - four in the first column and five in the second column. My goal is to rearrange the order of the divs within the columns when the vi ...
My simple input in HTML/CSS works perfectly, but when I tried to automate the process by writing a JavaScript function to create multiple inputs, I encountered an issue. The input created with JavaScript is already considered valid (from a CSS ":valid" sta ...
I am experiencing an issue with HTML and PHP combination. Here is the code snippet causing trouble: $args = array( 'post_type' => 'program', 'posts_per_page' => 100 ); $loop = new WP_Query( $args ); while ( ...
One thing I really enjoy is how Emmet can generate HTML using 'CSS-like' strings. However, I prefer not to use their CSS Abbreviations. For example, when I write the following line of CSS: li a| I expect to get a tab when I press 'TAB&apos ...