Unable to move a div to the top using padding-bottom

HTML-CSS
#1

I want the phone number section to be one the same height level as the address div on the left side in the contact section, but padding-bottom is unable to push it to the top, I do not quite get why. I thought maybe the div with the address info.'s width was blocking the phone number div to push to the top, but I attempting to change the width of the div with the dummy address has no effect either.

Also is it a good idea to use a bunch of div tags to have text in multiple lines inside a div box like I did for the address? If not, what is a better way that would also solve my above issue with it?

Code below for what I have tried:

<style>
h2 {
  color: rgba(0, 255, 255, 0.527);
}
.flex-container{
  margin-top: 30%;
  margin-left: 10%;
  display: flex;
  flex-direction: column;
  width: 40%;
}
</style>

<body>
  <header> </header>

  <section>
    <div class="flex-container">
      <h2>About Us</h2>
      <p>Sem nulla pharetra diam sit amet. Aliquam ut porttitor leo a diam sollicitudin tempor. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Turpis egestas integer eget aliquet nibh praesent tristique. Sem fringilla ut morbi tincidunt augue interdum velit euismod. Amet nisl purus in mollis nunc sed id semper. Consectetur a erat nam at lectus urna duis. Nam libero justo laoreet sit. Etiam sit amet nisl purus in mollis. Nunc sed augue lacus viverra vitae congue eu.Sodales ut etiam sit amet nisl purus. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Integer malesuada nunc vel risus. Nec ullamcorper sit amet risus nullam eget felis. Mus mauris vitae ultricies leo integer malesuada. Aliquet nec ullamcorper sit amet risus nullam eget felis.</p>

      <h2>Contact Us</h2>
      <div>
        <div>Dummy Headquarters</div>
        <div>Dummy Development Office</div>
        <div>Dummy Address </div>
        <div>Dummy Address</div>
      </div>
      <div style="padding-left:60%;">
        <div>Toll Free:(888) 88-888</div>
        <div>Local:(888) 888-888</div>
      </div>
    </div>
  </section>

</body>
#2

You could wrap the contact info in another div, then use flex on that.

<h2>Contact Us</h2>
<div class="contact">
  <div>
    <div>Dummy Headquarters</div>
    <!-- rest of address -->
  </div>
  <div><!-- padding is removed -->
    <div>Toll Free:(888) 88-888</div>
    <div>Local:(888) 888-888</div>
  </div>
</div>

.contact {
  display: flex;
}

There’s an <address> element for that. You can then use <br> to separate each line. You can use it also for contact numbers. Though I’m not sure if it’s better to use two separate <address> elements for each column, or just one that contains both.

1 Like
#3

So I made another container for social media icons and was able to get the social media icons to be on another line except one of them. Why is that if I decrease the margin-left below 40px to some extent the linkedin icon will be on the same line as the other icons but not if I increase the margin-left on the div encompassing the icons. I have the margin-left on purpose bc I would like to have the line to be on an exact position horizontally. My first thought was that some parent’s element’s width might be overriding, which could be the cause of the issue of the linkedin icon to be on the bottom line for some reason, but I could not pinpoint it. Am I looking for the cause of issue incorrectly?

https://jsfiddle.net/qsrgvtda/

#4

Here’s what I can gather:

  • That footer is set to be display: grid.
  • Normally a grid column would span the entire width of the element. However setting it to justify-content: center shrinks that column.
  • The column’s width seems to be determined by the width of the grid items. It probably uses the wider of the two items. Though I don’t understand why the CONTACT text is bleeding out of the column edge. Probably because of giving padding to the links.
    • As a side note, Firefox dev tools is great for working with grids. Not sure about Chrome.
    • Another side note, inline elements like <a> don’t exactly follow the box model. In particular, adding top/bottom padding to them might not have any noticeable effect like in this case.
  • The second grid item (the one with the icons) is now constrained within the column width.
  • The icons plus their right margins fit snuggly within that constraint.
  • Adding left margin is too much within that constraint, forcing the third icon to wrap.

Possible solutions include:

  • Explicitly setting the column’s width with grid-template-columns.
  • Explicitly setting the grid items’ widths.
  • Make the icon container a flexbox. Then you can use flex layout properties (e.g., justify-content) to layout the icons instead of adding margins to the icons themselves.
1 Like
#5

You are correct regarding the CONTACT link being where the width ends for that column due to justify center. Is it possible to use the same solution method of making another flex container for a span but this time to be one same line as the capital letter links but on the far right? I was trying to do the same method I used as you mentioned originally to have the numbers 123 on the far right but on the same horizontal line as the capital letter links but been unsuccessful. For that is my best to then use grid template columns and redo my footer organization?

https://jsfiddle.net/muv5bt0o/2/

#6