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

I'm having trouble getting my HTML POST request form to connect with the Express app.post. Any tips on how to properly pass on numeric variables to a different POST request?

There seems to be a misunderstanding or error on my part regarding POST and GET requests based on what I've read online. On myNumber.ejs, I have a submit form. Upon submission, the view switches to Add.ejs. The goal is for Add.ejs to display both the ...

javascripthtmlnode.jsexpress

Is there a way to insert animated images in front of every navigation menu item?

I have successfully implemented the HTML and CSS for my navigation menu items, but now I'm facing an issue trying to incorporate unique images right before each menu item in WordPress. Due to the hover animation on the menu names, I couldn't get ...

phphtmlwordpressmenunavigation

Tips on displaying a single column in Bootstrap when only one item is present and switching to two columns when two items are present

Currently, I am utilizing the row class in Bootstrap which contains two columns, one for X and one for Y. There are scenarios where either the X column, the Y column, or both may be present within the row. Since a row can have up to 12 columns, when only t ...

htmlcssbootstrap-4

Dynamically showing a div using JavaScript and AJAX after changing the window location

After successfully fetching data from the server through AJAX, I am redirecting to the same screen/URL. Is it possible to show/display a div after redirecting using jQuery? $.ajax({ type: "POST", url: action, data: form_data, success: func ...

javascriptjqueryhtmlcssajax

Animating a Canvas to Follow Mouse Coordinates

I am looking for a way to animate a circle moving towards specific coordinates, similar to the game . I have attempted using the jquery animate() function, but it is too slow due to the constant updating of the target coordinates. Is there a faster metho ...

javascripthtmlcanvasjquery-animate

Having trouble implementing CSS styling on my Django HTML file

I have come across several solutions on this issue but haven't been able to resolve my problem. I am attempting to apply my style.css located in the path \...\static\css. Below is my directory structure as shown in the image here: Here ...

pythoncssdjangodjango-settingsdjango-static

What is the reason that when we assign `'initial'` as the value for `display` property, it does not function as intended for list elements?

To toggle the visibility of elements, I have created a unique function that accepts an object and a boolean. Depending on the boolean value, either 'none' or 'initial' is assigned to the 'display' property of the specified obj ...

javascripthtml

Handle all link clicks on the webpage

My challenge is that some users are required to utilize a virtual desktop in order to access specific information on my website. However, within the virtual environment, there are links leading to external content that do not function properly. I am seekin ...

javascriptphpjqueryhtmlvirtual-machine

Issue arises when applying both overflow-x:scroll and justify-content:center

Encountering a problem with using overflow-x: scroll and justify-content: center on a flex parent container. Here is my code snippet: The issue: the first flex child item is not visible as it is cropped on the left side. Please refer to the screenshot and ...

htmlcssflexbox

Following an update, Storybook is failing to apply JSX styles

After upgrading my project from NextJS 10 to NextJS 12, everything is functioning normally except for Storybook, which is now missing its styles. I utilize the styled-jsx library to create embedded css, implementing it in this way: const SearchResult = ({ ...

cssreactjswebpacknext.jsstyled-jsx

Within a container, there are two divs separated by a white bar

Hello everyone, I am in need of creating a unique slideshow for my website and I want to start by splitting a div into two sections using a slightly skewed diagonal line that is either semi-transparent black or solid white. I have searched extensively onli ...

htmlcss

Render inline CSS styles with AngularJS

Can we use angular variables to write inline CSS styles? <div style="background: transparent url({{eventInfo.eventHeaderImg}}) top center no-repeat;"></div> Here is the output I received: "NetworkError: 404 Not Found - http://test/eventInfo. ...

htmlcssangularjs

Instructions for accessing and printing text from a nested ul tag with Selenium in Java

Hello everyone, I am currently learning about Selenium Automation and have created a website as shown below. Here is the HTML code: <!DOCTYPE html> <html> <head><title>Shop</title></head> <body> <ul> < ...

javahtmlcssseleniumselenium-webdriver

The jQuery `.load` function appears to be malfunctioning

I am having trouble getting my simple .load() function from jQuery to work. When I click on my DIV, nothing happens. However, the alert TEST does work. <div class="ing">CLICK HERE</div> <div id="overlay3-content"></div> <scrip ...

javascriptjqueryhtml

What is the most strategic way to conceal this overlay element?

Currently, the website I'm developing features a series of navigation elements at the top such as "Products" and "Company." Upon hovering over the Products link, an overlay displays a list of products with clickable links. Positioned at the top of the ...

javascriptjqueryhtml

Font malfunctioning on Microsoft Edge and Internet Explorer

Apologies if this seems like a silly question, but I recently imported a font from my computer into a CSS file. While it displays correctly in Chrome, it's not working in Microsoft Edge or Internet Explorer. Unfortunately, I don't have access to ...

cssgoogle-chromeinternet-explorermicrosoft-edge

Could you provide some advice for creating a Single Page website?

I am working on a simple HTML setup with various elements such as a navbar and content blocks. <html> <head> <title>My HTML5 App</title> <meta charset="UTF-8"> <meta name="viewport" content="wid ...

javascriptjqueryhtml

Focusing on the combination of Phonegap, Angular JS, and Onsen for app development

We are working on developing an app using PhoneGap, Angular JS, and Onsen. One issue we are facing is that we are unable to center the header in a modal. The code snippet is provided below: <ons-modal var="modalVariable"> <ons-navigator var"de ...

javascripthtmlangularjscordovaonsen-ui

Tips for successfully passing PHP variables to a JavaScript function

Having trouble passing the selected values of two comboboxes to another PHP file using AJAX. How can I pass both values in one function? <script> function showUser(str,str2) { if (str == "" || str2 =="") { document.getElementById("tx ...

javascriptphphtmlajax

How can I ensure that my boxes are aligned in a straight line?

I'm having trouble with applying the style="display: inline-block" to each div. Can someone please assist me? https://i.sstatic.net/Gi75l.png Below is my HTML code: <div class="hobby" style="display: inline-block"> <di ...

htmlcssbootstrap-4