CODEWITHSUNDEEP
css
user10480642
user10480642

Reputation:

Align footer horizontally

I have a small problem with my footer for a website I have made. So there is 2 sections: - On the top: .footer-sections with 3 div - On the bottom: .footer-bottom with just a p image here

I figured out what is the problem but I don't know how to fix it: the first child of .footer-sections is denser and it is taking more than 1/3 of the space (I am guessing). 

.footer {
  text-align: center;
  background-color: #333;
  color: #fff;
  padding: 50px;
  bottom: 0;
  width: 100%;
}

.footer .footer-sections {
  display: flex;
  justify-content: space-between;
}

.footer .footer-sections div {
  padding: 2rem 0rem;
  top: 0;
}

.footer .footer-sections p {
  font-size: 14px;
}

.footer .footer-bottom {
  text-align: center;
}

.footer .footer-bottom p {
  font-size: 14px;
}

.footer ul {
  list-style: none;
}

.footer ul li {
  font-size: 14px;
  color: #fff;
}
<div class="footer">
  <div class="footer-sections">
    <div class="adress-footer">
      <h4>Contact</h4>
      <p>102, Pyidaungsu Yeithka Road, Yangon, Myanmar</p>
      <p>+33 6 24 15 14 02</p>
      <p>[email protected]</p>

    </div>
    <div class="menu-footer">
      <h4>Operating Hours</h4>
      <p>Monday - Friday : 8 a.m - 5 p.m</p>
      <p>Saturday : 9 a.m - 1 p.m</p>
      <p>Sunday : closed</p>
    </div>
    <div>
      <h4>Blog</h4>
      <p>Read our latest posts</p>
      <p>How to write a resume ?</p>
      <p>The interview process</p>
    </div>

  </div>
  <div class="footer-bottom">
    <p>&copy; hrasia.com | Designed by Lorem</p>
  </div>

</div>

Upvotes: 0

Views: 331

Answers (2)

Bhanu
Bhanu

Reputation: 351

You can easily fix that using flex; just add

.footer .footer-sections div{
    // Thanks to  Rickard Elimää
    max-width: calc(100% / 3)
}

This would solve your issue.

You can check it here as well : https://codepen.io/bhanusinghR/pen/bGbqdbm?editors=1100

Upvotes: 1

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

First off: because you got padding, flex needs to know about the width of the div, excluding the padding, so you need to add box-sizing: border-box to take that into account.

You also need to tell the footer sections that they should take out an equal amount of space. You do that by adding flex: 1 to them.

I also added border: 1px solid #fff to make it a little bit easier to see the result. Try removing box-sizing: border-box from .footer to see the difference.

.footer {
  text-align: center;
  background-color: #333;
  color: #fff;
  padding: 50px;
  bottom: 0;
  width: 100%;
  box-sizing: border-box; /* ADDED */
}

.footer .footer-sections {
  display: flex;
  justify-content: space-between;
}

.footer .footer-sections div {
  padding: 2rem 0rem;
  top: 0;
  border: 1px solid #fff;
  flex: 1; /* ADDED */
}

.footer .footer-sections p {
  font-size: 14px;
}

.footer .footer-bottom {
  text-align: center;
}

.footer .footer-bottom p {
  font-size: 14px;
}

.footer ul {
  list-style: none;
}

.footer ul li {
  font-size: 14px;
  color: #fff;
}
<div class="footer">
  <div class="footer-sections">
    <div class="adress-footer">
      <h4>Contact</h4>
      <p>102, Pyidaungsu Yeithka Road, Yangon, Myanmar</p>
      <p>+33 6 24 15 14 02</p>
      <p>[email protected]</p>

    </div>
    <div class="menu-footer">
      <h4>Operating Hours</h4>
      <p>Monday - Friday : 8 a.m - 5 p.m</p>
      <p>Saturday : 9 a.m - 1 p.m</p>
      <p>Sunday : closed</p>
    </div>
    <div>
      <h4>Blog</h4>
      <p>Read our latest posts</p>
      <p>How to write a resume ?</p>
      <p>The interview process</p>
    </div>

  </div>
  <div class="footer-bottom">
    <p>&copy; hrasia.com | Designed by Lorem</p>
  </div>

</div>

Upvotes: 0

Related Questions