Unequal height among each div's elements

I'm struggling with creating a footer divided into 3 blocks, but they do not have equal heights, causing the border-right line to appear uneven.

Here is a screenshot of the issue: Not equal height of elements

Any suggestions on how to fix this? Is my approach of centering 3 blocks of content within one footer block incorrect?

Below is the code snippet:

<html>
<head>
</head>
<body>
<style>
#footer {
    height: auto;
    width: 100%;
    background-color: #55585d;
    margin-top: 30px;
    display: table;
}
#blocks {
    margin-left: auto;
    margin-right: auto;
    width: 1120px;
}
.f-block {
    box-sizing: border-box;
    width: 373px;
    float: left;
    padding: 30px;
    text-align: center;
    border-right: 1px solid #000000;
}
</style>
<footer>
    <div id="footer">
        <div id="blocks">
            <nav>
                <div class="f-block">
                    asdasdaasdfghfghfghfghfghfghfghf
                </div>
            </nav>
            <div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
            </div>
            <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
            </div>
        </div>
    </div>
</footer>
</body>
</html>
htmlcssblockfooter

Answer №1

Modify the layout by removing the float left and adding display: table-cell; to the child f-block elements in order to ensure they have equal height (with the tallest one setting the height for all).

Additionally, eliminate the usage of <nav></nav> or replace it with 

<nav class="f-block"><div></div></nav>

To style the 1st f-block, use .f-block:nth-of-type(1) and add a border-left property.

.f-block:nth-of-type(1) {
  border-left: 1px solid #000000;
}


<html>

<head>
</head>

<body>
  <style>
    #footer {
      height: auto;
      width: 100%;
      background-color: #55585d;
      margin-top: 30px;
      display: table;
      text-align: center;
    }
    
    #blocks {
      margin-left: auto;
      margin-right: auto;
      width: 1120px;
    }
    
    .f-block:nth-of-type(1) {
      border-left: 1px solid #000000;
    }
    
    .f-block {
      box-sizing: border-box;
      width: 373px;
      padding: 30px;
      text-align: center;
      border-right: 1px solid #000000;
      display: table-cell;
    }
  </style>
  <footer>
    <div id="footer">
      <div id="blocks">
        <div class="f-block">
          asdasdaasdfghfghfghfghfghfghfghf
        </div>
        <div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
        </div>
        <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
        </div>
      </div>
    </div>
  </footer>
</body>

</html>

Answer №2

footer and #footer appear to be redundant, so I have consolidated them. Additionally, the .f-block should be placed within your nav since it is adjacent to the other .f-blocks. By adding display: flex to the parent element, the heights of these elements will stretch to match their siblings.

#footer {
  height: auto;
  width: 100%;
  margin-top: 30px;
  background-color: #55585d;
}

#blocks {
  margin-left: auto;
  margin-right: auto;
  width: 1120px;
  display: table;
  
}

.f-block, nav {
  box-sizing: border-box;
  width: 373px;
  padding: 30px;
  text-align: center;
  border-right: 1px solid #000000;
  display: table-cell;
}
<footer id="footer">
    <div id="blocks">
      <nav>
        <div>
          asdasdaasdfghfghfghfghfghfghfghf
        </div>
      </nav>
      <div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
      </div>
      <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
      </div>
    </div>
</footer>

Answer №3

To optimize the layout, remove the <nav></nav> surrounding the initial element and apply display: flex to #blocks. This adjustment will cause its immediate children to occupy all available vertical space.

For a demonstration, please refer to this JSBin example.

Answer №4

Simply include either max-height or min-height in the footer blocks:

#footer {
    height: auto;
    width: 100%;
    background-color: #55585d;
    margin-top: 30px;
    display: table;
}
#blocks {
    margin-left: auto;
    margin-right: auto;
    width: 1120px;
}
.f-block {
    box-sizing: border-box;
    width: 373px;
    float: left;
    padding: 30px;
    text-align: center;
    border-right: 1px solid #000000;
    min-height: 96px;
}
<html>
<head>
</head>
<body>
<footer>
    <div id="footer">
        <div id="blocks">
            <nav>
                <div class="f-block">
                    asdasdaasdfghfghfghfghfghfghfghf
                </div>
            </nav>
            <div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
            </div>
            <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
            </div>
        </div>
    </div>
</footer>
</body>
</html>

Answer №5

The issue at hand pertains to the content within this div element. White space is currently not being handled properly. It would be advisable to make changes accordingly.

<footer>
    <div id="footer">
        <div id="blocks">
            <nav>
                <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
                </div>
            </nav>
            <div class="f-block">asdasdaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaasada
            </div>
            <div class="f-block">asdasdasd aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaa
            </div>
        </div>
    </div>
</footer>

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

css background-size and image position not working

On my website, users/members can upload or link a custom image for the start page. This feature works well with modern browsers that support background-size in CSS. However, if the browser does not support css3 background-size, the image may not fill the e ...

htmlcss

2-panel accordion interface

Hello there, I've encountered a problem that seems to be related to CSS. Here is the project I'm currently working on: My main focus is on the News accordion menu. The goal is to display a small image (50x50 with padding) next to a large headlin ...

jquerycsshtmlaccordion

WordPress presents a challenge with PHP Heredoc not displaying variables in HTML

I've coded some functions in my theme's functions.php file. Here is an example: $usrProfileHTML = <<<EOD <div class="eUserProfile"> <div class="eUsrImage"> <img src="{$envUserProfile['eUsrImage']}" a ...

phphtmlwordpressheredoc

Using a for loop, how can the property value be set in another object?

One challenge that I am facing is setting object property values. The object in question looks like this: const newPlan = { name: '', description: '', number: '', monday: { breakfast: '', ...

javascripthtmlobjectfor-loopdom

Guide to making a language selection wrapper using a gist script

Currently, I have a Gist file that is written in various languages but all serve the same purpose. As a result, I am interested in developing a language selection feature similar to what is found in the Google docs documentation. https://i.stack.imgur.com ...

javascripthtmlgist

Display an image with only a portion visible, no canvas, no frame, and no need

My dilemma involves an img with a surrounding box div. http://jsfiddle.net/6d4yC/7/ 1) I am seeking to display only a portion of the image (250x150) without generating a white overlay when it is in its large size. Placing a #box1 div around the image has ...

javascriptjquerycss

Learn how to integrate Bootstrap with Vue.js TreeView in this tutorial

If you're looking to create a treeview using Vue.js, the code structure would resemble something like this: HTML: <!-- item template --> <script type="text/x-template" id="item-template"> <li> <div ...

javascriptcsstwitter-bootstrapvue.jstreeview

Using SQL to Insert Values into Select/Option

I am attempting to create a select form element with predetermined options. <select name="select1"> <option value="value1">Value 1</option> <option value="value2">Value 2</option> <option value="value3">Value 3 ...

phphtmlmysqlsqlforms

What steps are involved in developing a quiz similar to this one?

Check out this interesting quiz: I noticed that in this quiz, when you answer a question, only that section refreshes instead of the entire page. How can I create a quiz like this? ...

javascripthtml

Chrome's struggle with displaying multiple backgrounds on retina screens due to CSS complications

My goal is to create top and bottom shadows for a parent container when scrolling through the content. This effect works perfectly everywhere except on Chrome browser with retina screens, where it behaves strangely. The background becomes stuck at the top, ...

htmlcssgoogle-chromeretina-display

Using httpRequest to handle binary data in JavaScript

Having trouble deciphering the response of an http request that is a binary datastream representing a jpeg image, despite numerous attempts. Edit: Including the full code snippet below: xmlhttp = false; /*@cc_on@*/ /*@if (@_jscript_versio ...

javascripthtmlxmlhttprequestbinary-dataresponsetext

Tips for modifying jsFiddle code to function properly in a web browser

While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle ...

javascriptjqueryhtmlcss

Struggling to find a way to showcase API data on a HTML site

Is there a way to dynamically show the live prices of crypto currencies on my website? I wrote a script that successfully displays the current price, but I'm struggling with implementing auto-refresh using setInterval. Here's the code I have so f ...

javascripthtmljsonapi

Move the Div element up and down when clicked

When a tag is clicked, the corresponding div opens and closes. I would like the div to slide down and up slowly instead of appearing immediately. <a href="" class="accordion">Click here</a> <div class="panel" id="AccordionDiv"> ...

javascriptjqueryhtmlcssangularjs

Could someone assist me in resolving the issue of receiving empty emails from my online form submission?

Every day, I receive 6 blank emails from my contact form at the same time. Even though the form on the website is filled out correctly and all the information goes through, I still get these mysterious blank emails. I have implemented validation checks in ...

javascriptphphtmlforms

Leveraging $last in Angular for obtaining the final visible element with ng-show

My ng-repeat container div contains multiple images, each with a corresponding div next to it. Using $last, I can make sure only the div of the final image is visible after all images. However, I also have a filter button on the page that hides certain im ...

javascriptjqueryhtmlcssangularjs

Elevate the expanded card above the others on hover instead of displacing them downward

I'm working on a grid of cards where hovering over one card expands the bottom section to reveal more content. The issue is, when it expands, it pushes all other cards down. What I actually want is for it to overlay on top of the card below it. Here ...

htmlcss

Tips for avoiding a large <ul> element from spilling over the body in a flexbox design

I struggled to articulate the problem I am facing, and I apologize if it's still unclear So, in my app, I have 3 cards, and the 2 side ones contain lists (<ul>) that can become quite lengthy. I want the scrollbar to appear on the <ul> its ...

htmlcssflexbox

Issue with child div exceeding 100% height within CSS Flexbox causing inconsistency in Firefox and Chrome browsers

I am facing a challenge trying to make a div resize to match its parent's height using flexbox. This issue seems to occur only in Chrome (48), as it displays correctly in Firefox (44). You can view the example on Fiddle: https://jsfiddle.net/jvilla/k ...

htmlcssflexbox

Turn off the standard caps lock tooltip in Internet Explorer input boxes

When using the login dialog on my password input in Internet Explorer, a default tooltip appears when caps lock is activated (other browsers do not have this feature). I am looking to remove this default tooltip without relying on JavaScript. Is there an a ...

htmlinternet-explorerinputcapslock