Styling divs to have equal height using CSS borders

My current technique involves using negative margins to create the illusion of equal heights for my horizontal divs. However, adding borders to these divs has created an issue where there is no bottom border due to the combination of padding and negative margin.

Take a look at this fiddle I've prepared with my code: http://jsfiddle.net/BvVKH/3/

HTML:

<div class="justified-divs">
    <div>
        <p>column</p>
    </div>
    <div>
        <p>column</p>
        <p>column</p>
    </div>
    <div>
        <p>column</p>
        <p>column</p>
        <p>column</p>
    </div>
</div>

Relevant CSS:

.justified-divs {
    overflow: hidden; /* necessary to cut off stretched background */
}

.justified-divs div {
    padding: 0 10px 9999px 10px; 
    margin-bottom: -9999px;
    *margin-bottom: -9999px;
}

I have explored various solutions but originally chose this one due to its support in older versions of Internet Explorer. Are there any alternative pure CSS options that can achieve equal heights with borders across all browsers?

htmlcss

Answer №1

I have successfully found a solution to achieve the desired result. I came across this helpful guide: . The key is identifying the column with the most content to implement it effectively. In case of frequent changes (e.g., dynamic content), using a Javascript solution might be necessary. Below is the code snippet, but you can also view it on jsFiddle: http://jsfiddle.net/mesPb/

<!-- HTML -->
<div class="justified-divs">
    <div class="one">
       <p>column</p>
    </div>
    <div class="two">
        <p>column</p>
        <p>column</p>
    </div>
    <div class="longest">
        <p>column</p>
        <p>column</p>
        <p>column</p>
    </div>
</div>

/* CSS, BABY */
div.justified-divs{
    background: #090;
    position: relative;
}

div.justified-divs div{
    width: 30%;
    background: #fff;
    top:0;
    bottom:0;
    border: 1px solid red;
}

.one{
   left:0;
   position: absolute;
}

.longest{
    margin-left: 70%;    
}

.two{
    position: absolute;
    left: 35%;     
}

Hopefully, this solution addresses your needs.

Answer №2

Have you considered incorporating pseudo-elements within each column?

.justified-divs div:after {
      content: '';
      display: block;
      width: 30%;
      height: 0;
      border-bottom: 2px solid red;
      position: absolute;
      bottom: 0;
      padding: 0 10px;
      margin-left: -10px;
}


.justified-divs {
  font-size: 0;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  overflow: hidden;
  /*temp debug colors */
  background-color: green;
  position: relative;
}
.justified-divs:after {
  /* stretch divs to give them equal horizontal spacing */
  content: '';
  width: 100%;
  display: inline-block;
}
.justified-divs div {
  background-color: white;
  font-size: 14px;
  vertical-align: top;
  display: inline-block;
  text-align: left;
  *display: inline;
  /* <= IE7 hacks */
  zoom: 1;
  /* <= IE7 hacks */
  /* use large padding and equal size negative margin to keep column heights the same size as whichever is tallest */
  padding: 0 10px 9999px 10px;
  margin-bottom: -9999px;
  *margin-bottom: -9999px;
  /*temp debug colors */
  width: 30%;
  border: 2px solid red;
}
.justified-divs div:after {
  content: '';
  display: block;
  width: 30%;
  height: 0;
  border-bottom: 2px solid red;
  position: absolute;
  bottom: 0;
  padding: 0 10px;
  margin-left: -10px;
}
<div class="justified-divs">
  <div>
    <p>column</p>
  </div>
  <div>
    <p>column</p>
    <p>column</p>
  </div>
  <div>
    <p>column</p>
    <p>column</p>
    <p>column</p>
  </div>
</div>

I have included position: relative; within .justified-divs and :after for each column.

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

Having trouble getting a background image with tint to display properly in Bootstrap

I applied a sleek black transparent gradient to my body background picture, but as soon as I integrated bootstrap into the HTML code, the effect ceased to function. body { background: linear-gradient( rgba(0, 0, 0, 0.5), rgba ...

htmlcssbootstrap-4

Make an image vanish once a table has been loaded using jQuery

I am striving to achieve a loading gif display upon button click and then vanish once the div loads with information from a jQuery function. Unfortunately, the page doesn't load, ruling out the use of the .load option. I am struggling to find an alter ...

jqueryhtmlloading-image

Responsive Text and Alignment in the Latest Bootstrap 5

My goal is to center my div element while keeping the text aligned to the left. Here's the code I have: <div class="container"> <div class="row"> <div class="col"> <h1>< ...

htmlcssresponsivebootstrap-5text-styling

Trouble accessing data with AJAX

I am trying to retrieve content from a web page and display it on my own webpage using AJAX. However, I keep encountering an "Access denied" error before the specified page is fetched. It's important to note that the target page does not require any l ...

javascripthtmlajax

Show the page links on the custom WordPress theme's home page

This is my first time creating a wordpress theme from scratch and I could use some assistance with tackling two specific challenges involving the WP_Query class and the navigation menu. My goal is to showcase the titles and featured images of pages on the ...

phphtmlcsswordpressbootstrap-4

Ensure that two div elements always expand to occupy the entire width of the parent div container

Despite my research and understanding of floats, I am struggling to comprehend why I am unable to evenly float two divs within a wrapping div. #wrap { border: 1px solid red; height: 200px; width: 100%; } #gr1 { border: 1px solid blue; ...

htmlcss

center a horizontal line using StyledSheets in your project

After drawing a horizontal line, I noticed that it is positioned towards the left side of the screen. I am hesitant to increase its width. Are there any other methods to move it to the center? I attempted wrapping it with another view and using alignConten ...

javascriptcssreactjstypescriptreact-native

Achieving responsive design for div tags: Automatically adjust the width of left and right div tags to fit the screen, while maintaining the static

I need help figuring out how to automatically adjust the width of div 'one' and div 'three' to the screen side while keeping the width of div 'two' static using CSS. All three divs should be in the same row. Here is my HTML c ...

htmlcss

An error was encountered involving an unexpected token < at the beginning of a JSON file while using express with firebase

After setting up an authentication system in express using firebase auth, I established an endpoint in my express server: app.post('/users/login', (req, res) => { console.log('logging in...'); firebase.auth().signInWithEmail ...

javascripthtmlfirebaseexpress

I am interested in designing a dynamic wave-themed background for a menu

I am looking to create a menu background that ripples like a wave when hovered over. Check out the first example here: https://i.sstatic.net/LoOWM.png I want to achieve the same effect. Can anyone help me with how I can do this? <ul> <li>likk ...

javascripthtmlcsssvgbootstrap-4

Investigate the presence of a vertical scrollbar using JQuery or JavaScript

Within an HTML report, I have applied the style "overflow:auto" to allow for dynamic data filling. I am now facing the challenge of detecting whether a vertical scrollbar exists within the report. After scouring various forums for solutions, I came across ...

javascriptjqueryhtml

What could be causing the background-color in Chrome Dev Tools to appear faded instead of crossed out?

I have a few queries to share. I noticed that the background of my menu bar is white, but when I remove a specific class from an element further down on the page, the menu bar turns black. I am perplexed as to why changing the style of an HTML section elem ...

cssbootstrap-4google-chrome-devtools

What is the best way to create a never-ending horizontal animation that moves a logo image from right

I have a dilemma with displaying my logo images. I have more than 10 logos, but I want to showcase only 6 of them on page load. The rest of the logos should slide horizontally from right to left in an infinite loop. Can anyone assist me with creating keyf ...

jqueryhtmlcss

Guide to setting up a subdirectory for an html/php webpage on an Azure Website

Is there a way to customize the URL of my website so it looks like 'https://example.com/mainPage/subPage/anotherSubPage' for a more organized directory structure? I am currently using an Azure web app server and I have been unable to locate the w ...

phphtmlcssazureurl-rewriting

Modifying the bullet style for the navigation bar list in Bootstrap 4

Is there a way to remove the bullet point that appears alongside the navigation menu items in Bootstrap 4/Jhipster? Currently, each item has both a bullet and an icon <i class="fa fa-home" aria-hidden="true"></i>, but I want to get rid of the ...

cssnavbarbootstrap-4

Strange behavior in Internet Explorer when using jQuery to simulate a click on an input=file element

My customized jQuery and HTML code achieves the following purpose: There is a placeholder image that can be clicked by the user, triggering a file selection dialog to open. Once a file is chosen, the corresponding multipart form is sent to the server. To ...

htmljqueryajaxfile-uploadjquery-events

I am having trouble running the code, PHP seems to be operational as I have tested it with sample PHP code. Can anyone help decipher? I have shared the PHP and HTML code for reference

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Computer Status Checker< ...

phphtml

Extracting HTML element from PHP string and placing it in a different page

In a PHP string, there is an HTML structure including a table within it: <html> <head> <!-- not much going on here --> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="10 ...

javascriptphpjqueryhtml

Exploring the capabilities of rowGroup within DataTables

Currently, in the process of completing a project, I am retrieving data from a REST API to populate my DataTable. To avoid displaying duplicate items, I am interested in creating subrows in the DataTable with a drop-down menu based on an item in the "Deliv ...

javascripthtmljqueryajaxdatatables

What is the best way to create a dynamic text area that changes based on a dropdown selection?

I'm trying to create a feature on my form where selecting a retailer from a dropdown menu automatically generates a corresponding link next to the textbox. For example, if someone picks Best Buy, I want a link to bestbuy.com to show up immediately wit ...

phpjavascripthtmlajax