Some divs are not inheriting class properties as expected

I am currently working on a footer section that consists of 4 div elements, each with a shared class. Oddly enough, the first div is extending its width more than expected. The other 3 div elements are adjusting their width based on the content within them. Why is this discrepancy happening with the first div? I understand that I can manually adjust the dimensions of that div, but I am curious about the underlying reason for this behavior.

https://i.sstatic.net/CByE7.png

Additionally, I have set align-items: flex-start for all the div elements, but it appears to only be applying to the first one.

Here is my HTML and CSS Code:

#footer{
  background-color: #1a1a1a;
  height:60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer .container{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-right: 2rem;
}


.contact-handle img{
  width: 20%;
}

#footer h4{
  color: white;
  font-weight: 500;
  font-size: 18px;
}

#footer p{
  color: grey;
  font-size: 1rem;
  margin:0;
  margin-bottom: 1rem;
}

#footer i{
  color: grey;
  margin-right: 1rem;
}
<section id="footer">
    <div class="contact-handle container">
      <img src="images/logo.png" alt="">
      <h4>Contact</h4>
      <p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
      <p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
      <p>Hours: 10:00 - 18:00, Mon - Sat</p>
      <br>
      <h4>Follow Us</h4>
      <div class="social_media">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-instagram"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>
    </div>

    <div class="About container">
      <h4>About</h4>
      <br>
      <p>About Us</p>
      <p>Delivery Information</p>
      <p>Privacy Policy</p>
      <p>Terms & Conditions</p>
      <p>Conatct Us</p>
    </div>

    <div class="Account container">
      <h4>My Account</h4>
      <br>
      <p>Sign In</p>
      <p>View Cart</p>
      <p>My Wishlist</p>
      <p>Track Order</p>
      <p>Help</p>
    </div>

    <div class="App_gateway container">
      <h4>Install App</h4>
    </div>
  </section>

htmlcssflexbox

Answer №1

If you're facing a similar issue, consider using the rem or em unit for a solution.

The Explanation: When employing flex, the size of each container is automatically adjusted based on the largest intrinsic dimension of the element within.

In the scenario described, the image in the first div holds the largest intrinsic dimension.

Setting the image to take up 20% of the parent container's width (the % is relative to the parent container) results in the image adapting accordingly. Upon inspecting the width of the parent container, you'll find it retains the exact intrinsic value of the image dimension.

While the exact reason for this behavior isn't clear (a more knowledgeable individual could weigh in), it's generally advisable to steer clear of using percentages and opt for rem/em units instead.

Below is an example utilizing rem:

footer {
  height: 100%;
  background-color: #1a1a1a;
  padding: 4em 1em;
  /* add padding instead of 60vh height */
}

#footer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* use space-around */

}

#footer .container {
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  justify-content: center;
  margin-right: 2rem;
}

img {
  width: 5rem;
}

#footer h4 {
  color: white;
  font-weight: 500;
  font-size: 18px;
}

#footer p {
  color: grey;
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1rem;
}

#footer i {
  color: grey;
  margin-right: 1rem;
}
<<!DOCTYPE html>
  <html>

  <head>
    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title></title>
  </head>

  <body>

    <footer>
      <section id="footer">
        <div class="contact-handle container">
          <a href="https://lh3.googleusercontent.com/2Fz6Fn5zq_hh75oNLsyNqyGSHzPopHojN77Eu6GImw_3bb4JteONR_K8lnCY2nRbZQV9RD7ACVYvTHEEoW6oGt2GNkAVXzsGdHl1XI9JWwr9ojo3N7t5mYgqaux8lESdvi4mJTti4Ok=w2400?source=screenshot.guru"> <img src="https://lh3.googleusercontent.com/2Fz6Fn5zq_hh75oNLsyNqyGSHzPopHojN77Eu6GImw_3bb4JteONR_K8lnCY2nRbZQV9RD7ACVYvTHEEoW6oGt2GNkAVXzsGdHl1XI9JWwr9ojo3N7t5mYgqaux8lESdvi4mJTti4Ok=w600-h315-p-k" /> </a>

          <h4>Contact</h4>
          <p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
          <p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
          <p>Hours: 10:00 - 18:00, Mon - Sat</p>
          <br>
          <h4>Follow Us</h4>
          <div class="social_media">
            <i class="fa-brands fa-facebook-f"></i>
            <i class="fa-brands fa-twitter"></i>
            <i class="fa-brands fa-instagram"></i>
            <i class="fa-brands fa-youtube"></i>
          </div>
        </div>

        <div class="About container">
          <h4>About</h4>
          <br>
          <p>About Us</p>
          <p>Delivery Information</p>
          <p>Privacy Policy</p>
          <p>Terms & Conditions</p>
          <p>Conatct Us</p>
        </div>

        <div class="Account container">
          <h4>My Account</h4>
          <br>
          <p>Sign In</p>
          <p>View Cart</p>
          <p>My Wishlist</p>
          <p>Track Order</p>
          <p>Help</p>
        </div>

        <div class="App_gateway container">
          <h4>Install App</h4>
        </div>
      </section>
    </footer>


  </body>

  </html>

Answer №2

It seems like there might be some confusion about what you're looking for in the question. It doesn't look like the dimensions of the divs are being set anywhere. The first div with the class of container appears larger simply because of the content inside.

If you change the justify-content: center; in your #footer selector

to justify-content: space-between;

it should achieve the desired effect of evenly spacing everything out.

Additionally, you mentioned a header but the HTML you provided has a section id of footer. Make sure to double-check everything in your question before posting to prevent any confusion in the future.

Answer №3

Consider a slightly unique method by incorporating the <footer> element as the parent and adjusting the background-color and height properties. Instead of specifying height: 60vh;, utilize height: 100%; with appropriate padding to create additional space. Next, apply align-items: flex-start; to the #footer element.

footer {
  height: 100%;
  background-color: #1a1a1a;
  padding: 4em 1em;
  /* Use padding instead of 60vh height */
}

#footer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#footer .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-right: 2rem;
}

.contact-handle img {
  width: 20%;
}

#footer h4 {
  color: white;
  font-weight: 500;
  font-size: 18px;
}

#footer p {
  color: grey;
  font-size: 1rem;
  margin: 0;
  margin-bottom: 1rem;
}

#footer i {
  color: grey;
  margin-right: 1rem;
}
<footer>
  <section id="footer">
    <div class="contact-handle container">
      <img src="images/logo.png" alt="">
      <h4>Contact</h4>
      <p>Address: XXX ABCDE Road, Street 32, Mumbai</p>
      <p>Phone: (+91) 01234 56789/(+01) 2222 365</p>
      <p>Hours: 10:00 - 18:00, Mon - Sat</p>
      <br>
      <h4>Follow Us</h4>
      <div class="social_media">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-instagram"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>
    </div>

    <div class="About container">
      <h4>About</h4>
      <br>
      <p>About Us</p>
      <p>Delivery Information</p>
      <p>Privacy Policy</p>
      <p>Terms & Conditions</p>
      <p>Contact Us</p>
    </div>

    <div class="Account container">
      <h4>My Account</h4>
      <br>
      <p>Sign In</p>
      <p>View Cart</p>
      <p>My Wishlist</p>
      <p>Track Order</p>
      <p>Help</p>
    </div>

    <div class="App_gateway container">
      <h4>Install App</h4>
    </div>
  </section>
</footer>

For an alternative approach, check out this Fiddle for Sahil. This version enables the footer to extend full width and evenly distributes column width for consistent spacing.

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

Choose multiple options, with a maximum limit of 2 selections

I am currently working with a multiselect feature for various subjects. I would like to limit the selection to a maximum of 2 options and disable the rest. Additionally, if a user deselects an option, it should become available again for selection. <se ...

javascripthtmlmulti-select

Issues with form inputs alignment in Bootstrap 4 styling

Check out this sample jsFiddle I created, using the html directly from my website. The css for bootstrap 4 is included, which I compiled using sass in addition to my custom css. Everything seems to align perfectly on all screen sizes, except for small dis ...

htmlcsstwitter-bootstrap

Retrieving custom attribute values during a drop event in Jquery drag and drop operations

I'm currently working on a moodboard creator, but I've hit a snag while trying to transfer the values from custom attributes of an image to a new div once the drop action is completed. Every time the drop is finished, it always fetches the value ...

jqueryhtml

Is it better to have JavaScript and HTML in separate files or combined into a single HTML file?

Do you notice any difference when coding in both HTML and JavaScript within a single .html file compared to separating HTML code in a .html file and JavaScript code in a .js file? Does the functionality remain the same in both scenarios? For example, in t ...

javascripthtmlcompilationbrowserify

Can uniform columns be created in separate HTML elements?

Looking to create a uniform list in HTML, where the columns inside each panel line up perfectly. See the desired layout: https://i.sstatic.net/FbbPu.png In this example, Col_1 has a width of "BBBBB", as it is the widest content in that column, ...

javascripthtmlcss

Creating a platform that allows users to build custom themes on a website using ASP.NET/C# programming language

I'm looking for a sophisticated approach to designing an ASP.NET website where users can easily create personalized themes for their sites using a user-friendly interface. Can ASP.NET themes assist with this? Should the interface enable users to gener ...

asp.netcssthemes

Is there a way to add animation effects when transitioning between sections in HTML?

Recently, I decided to incorporate sections into my website, but I am not a fan of how it simply jumps to the designated section. I have observed on some websites that when you click a button to move to another section, it smoothly slides down. Despite c ...

htmlcssanimationhyperlinksections

Creating a Dynamic Navigation Bar using React and NextJS

How can we implement a Responsive Menu with React and NextJS? The magic happens when the user clicks a button, triggering the inclusion of the "open" class within the "menu" class. The rest is taken care of by the CSS styles. Illustrative code snippet: . ...

cssreactjsnext.js

Fixed width for the last column in DataTables

Here's the scenario: I have a jQuery script that loads DataTables, and I know how to set the "aoColumns" : "sWidth" parameter to fix the width of a specific column, which is working fine. However, my issue arises from having multiple tables with var ...

javascriptjquerycsshtml-table

The skipping of crucial text in tab focus is adversely affecting the accessibility of the website

My appbar contains an image link, a warning indicating the user's current environment, and details about the logged-in user. While testing accessibility with a screen reader, I noticed that tab focus skips over the user details in favor of a link in ...

cssmaterial-uiaccessibilityfocusscreen-readers

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

After collaborating with fellow coders to develop info boxes using HTML, CSS, and JavaScript, I have come across an issue with the hover functionality not working properly in Internet Explorer. Interestingly, everything functions flawlessly on Google Chrom ...

javascripthtmlcssgoogle-chromeinternet-explorer

showing information from a table column

Utilizing the jQuery DataTables plugin with a JSF <h:dataTable>. The page contains 86 records. +++++++++++++++++++++++++++++++++++++ + SN. + Name + Email + +++++++++++++++++++++++++++++++++++++ + 1 + Name 1 + Email 1 + + ...

javascriptjqueryhtmljsf-2datatables

CSS media query that prioritizes styling for large screens over small screens

I am currently working on making my new website development project mobile responsive, but I am encountering some strange behavior that is quite frustrating. I am hoping someone can help me figure out what mistake I may be making here. Whenever I test the ...

cssresponsive-designmedia-queries

What could be causing the failure in Selenium's findElement(By.css("span:contains(string)") method?

I have been attempting to use selenium-webdriver to click on a specific element within a website, which happens to be plain text. However, when I use the following javascript code const spanElement = driver.findElement(By.css("span:contains('TEXT&apo ...

javascriptcssseleniumfirefoxwebdriver

Styling in CSS is being applied to a button element within a React component,

Having trouble with a button styled with the className 'actions' The button displays the CSS styling from '.actions', but not '.actions button'. Both should be applied. This code snippet works for all elements ...

javascripthtmlcssreactjs

Parent div overflowing due to vertical flex container

In my current project, I am attempting to design a layout with a fixed header and footer along with a dynamic content area that utilizes the remaining vertical space. The content-wrapper contains a lot of data, which may require a scrollbar to navigate. H ...

htmlcssflexbox

Is there a way to maintain scroll position on a dynamically refreshing div?

After searching for hours, I still can't find a solution to my problem. I am using a simple JQuery script to refresh a div and display my PHP output in it. $script = " <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery ...

javascripthtmlajaxscroll

The CSS attribute selector is unable to target dynamically appended class names

Utilizing React's CSS animations add-on has been a seamless process, with everything running smoothly when using the provided classnames. .quote-enter { opacity: 0.01; transition: opacity .25s ease-in; } .quote-enter.quote-enter-active { opaci ...

csscss-selectors

What is the reason behind the observation of executed javascript upon receiving a JSON response from the server?

My current knowledge of HTTP involves web browsers sending mainly GET or POST requests, with the server responding accordingly. I am aware that servers can return a complete HTML document that is ready to be displayed in a web browser. Additionally, I un ...

htmljsonwebsingle-page-application

Develop a personalized component featuring various sub-categories

Currently, I am in the process of implementing a data-table element using custom elements (web components). Each row in the table can contain different types of cells such as text, number, date, etc. For example: <my-table> <my-table-cell-te ...

htmlcssdomweb-componentcustom-element