Ensure uniform height for all floating DIVS

Problem Description

I'm facing an issue with the columns in my footer. I have a total of four columns, and I've applied the border-right property to all of them except for the last one:

Due to varying content and height in each column, I am unable to set fixed height values for individual columns. As a result, the borders between the columns are not equal in length.

How can I ensure that all columns have the same height so that the borders align perfectly?

Solution Code

Welcome to CSS code sample
Fascinating div design

htmlcss

Answer №1

To achieve the desired layout, assign the container a style of display: table, and set the sections to display: table-cell (while eliminating the float property).

The revised code will appear as follows:

.container {
    display: table;
    ...
}
.container .section {
    display: table-cell;
    ...
}

Answer №2

To ensure all direct children elements have the same height by default in div.wrapper, add the CSS property display: flex;.

For more information on using display flex, visit the following resources: MDN article or this CSS trick article

Answer №3

Consider trying this method instead

section.container{
    display:flex;
}
.column + .column:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    border-right: solid 1px #999;
}

Answer №4

If you want to achieve this, jquery is the way to go.

$(document).ready(function(){
        $('.wrapper').each(function(){  
            var highestBox = 0;
            $('.column', this).each(function(){
                if($(this).height() > highestBox) 
                   highestBox = $(this).height(); 
            });  
            $('.column',this).height(highestBox);
    });
});
CSS and HTML code provided above...
JavaScript libraries imported from external CDN...

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

The media does not need to be applied to the ".nav__btn" class

How can I hide an element with the ".nav__btn" class by setting its display to none when the screen width is at least 768px? I tried the following media code but it doesn't work. Media Code @media (min-width: 768px) { .nav__btn { display: ...

cssmedia-queries

Having trouble locating the existing placeholder in my WordPress theme that I'm trying to change

I am currently using the KuteShop WordPress Woo-commerce template and I want to customize the Placeholder Text "I'm searching for..." and "All Cate." shown in the image below: Despite my efforts, I have been unable to locate where I can make these ch ...

phphtmlwordpress

Do not transfer any files during the migration process from NGINX to Apache

I have a specific URL structure: http://www.example.com/folder/index.php?dir=dir1 I want to make it accessible from: http://www.example.com/folder/dir1 To achieve this, I set up rules in my .htaccess file located in the 'folder' directory: O ...

htmlapache.htaccesshttp-redirecturl-rewriting

Styling a Razor view using inline CSS and responsive media queries

I need to add some simple inline styling for print purposes to an .cshtml page I'm working on. I initially tried using the @media print media query, but it is causing issues with my cshtml page. Is there a workaround for this problem? The culprit see ...

asp.netasp.net-mvccssasp.net-mvc-4razor

Positioning a designated div directly above a designated spot on the canvas

I'm grappling with a challenge in my game where the canvas handles most of the animation, but the timer for the game resides outside the canvas in a separate div. I've been struggling to center the timer around the same focal point as the squares ...

javascripthtmlcsscanvas

Is XPath applicable to data that has been labeled?

I am looking to access the data within the second div: <div class="my-3"> <div class="d-flex justify-content-between">Monthly:</div> <div>0 / 30,000</div> </div> Within the code above, I want to t ...

htmlxmlxpath

Aligning an image vertically within a division

I am currently working on aligning images vertically within an image rotator (SlideDeck). At the moment, all the images are aligned at the top but I need them to be centered. The heights of the images vary. I have tried several methods, including absolute ...

csshtmlvertical-alignment

choosing a date range

My goal was to determine the number of days between a "fromDate" and a "toDate," with the restriction that the user should not be able to select a date range of more than 90 days. I am utilizing the Dojo framework to create a date calendar. Below is the co ...

javascripthtmljspdojo

What could be causing my div to display a horizontal scrollbar in Firefox?

Here's a straightforward test scenario: <html> <body> <div style="border:2px solid black; overflow: auto;"> x </div> </body> </html> Upon rendering, a horizontal scrollbar appears! I was using F ...

htmlcsslinuxfirefox

Exploring the images in a continuous loop

Looking to create a unique image looping effect using HTML, CSS, and Jquery/Javascript. The concept is to display several images on one page that do not move, but loop through them one at a time while displaying text above the current image. For example, ...

javascriptjqueryhtmlcss

Is it a good practice to whitelist inputs for preg_replace()?

How can whitelisting be implemented for input fields to prevent HTML and XSS injection? It seems like using preg_replace with regular expressions is a good initial step. Are there any other methods worth exploring? ...

phphtmlinputxsswhitelist

Steps for accessing a particular item with *ngfor in Angular 2

I'm struggling to figure out why both elements of my array are displaying simultaneously in my browser instead of separately. Take a look at this screenshot to see what I mean: https://i.stack.imgur.com/0EKSn.png Is there a method to specifically ac ...

htmlarraysangularngfor

Having an issue with Javascript onclick not updating div content upon first click

Having difficulty getting content from one div to another on the initial click. Some of my code: <a href="#" onClick="goPage1();">Feed</a> Function being called: function goPage1(){ $("#feed").html(""); get_jsonp_feed(); $("#con ...

javascriptjqueryhtmlajax

Every time I try to convert my HTML to a PDF using jsPDF, some of the content

Within my React App on the client-side, I've implemented a button to generate a PDF using the current HTML content through jsPDF. Rather than utilizing .fromHTML(), I opted for .html() as it preserves the HTML styles during the conversion process. How ...

javascripthtmlreactjspdfjspdf

Tips for managing table scroll in a flexbox design

Check out the demo here I am working with a table that has an indefinite number of rows and columns. When the table has a small number of rows and columns, it adjusts its width according to the available page space minus the width of the sidebar. Everythi ...

htmlcssangularflexboxangular-flex-layout

Is there a way to position the primefaces DefaultMenuModel in front of an accordion panel?

Currently, I have a DefaultMenuModel nested within a tab in an accordion panel. However, the menu is appearing behind the tab of the accordion panel and I want to adjust the z-index of the menu so that it appears in front of the tab. Here is the current ...

htmlcssjsfprimefaces

Is it possible to nest a parsys within another parsys in this context?

On my webpage, I have a paragraph system (parsys) with a component that contains two inner paragraph systems. When I try to add a rich text component to each of these inner paragraph systems, the components overlap and become uneditable. Is it possible t ...

javahtmlcsscontent-management-systemaem

Which javascript alternative most closely mimics the features of html5 form validation?

I just finished creating a form validation app using html5 for client side validation. Now, I am searching for a javascript implementation that can replicate this functionality in older browsers. The key qualities I am looking for include: Replicating t ...

javascriptjqueryhtmlpolyfills

"Implementing jQuery toggle and addClass functions in your

How do I modify the class within the same action as a toggle effect, which works independently very well? (I have multiple blocks with the same classes) $(".w_content").hide(); $(".w_target").click(function() { $(this).parent().next('.w_content&apos ...

jqueryhtmlcss

Output a JSON array to display in a table

Firstly, I receive orders. app.controller('customersController', ['$scope', '$http', function($scope,$http) { $http.get("http://18ff2f50.tunnel.mobi/yii2-basic/tests/Customers_JSON.json") .success(function (respon ...

htmljsonangularjs