CSS two column layout not horizontally aligned

Question

I want "About This Page" and "Around the web" to be horizontally aligned.

Also, open to any suggestions for improving this snippet of code. I just want to have a responsive / simple two column layout behind a wide colored background.

.footer-above {
    width: 100%;
    height: 200px;
    background-color: #aaa;
    padding-top: 30px;
    padding-bottom: 30px;
    color: white;
    font-size: 20px;
}

.footer-links,
.built-with {
    display: inline-block;
    max-width: 40%;
    height: 100%;
    border: 2px solid black;
}

.container {
    margin: 0 auto;
    width: 500px;
    height: 100%;
}

<div class="footer-above">
    <div class="container">
        <div class="built-with">
            <h3>ABOUT THIS PAGE</h3>
            <p> Made with HTML5Boilerplate</p>
         </div><!--built-with-->
         <div class="footer-links">
            <h3>AROUND THE WEB</h3>
         </div><!--footer-links-->
    </div><!--container-->
</div><!-- footer-above -->

score 1 · Answer 1 · answered Nov 20 '17 at 03:05

Simply use flex. Read about it here

.footer-above {
    width: 100%;
    height: 200px;
    background-color: #aaa;
    padding-top: 30px;
    padding-bottom: 30px;
    color: white;
    font-size: 20px;
}

.footer-links,
.built-with {
    display: inline-block;
    max-width: 40%;
    height: 100%;
    border: 2px solid black;
}

.container {
    margin: 0 auto;
    width: 500px;
    height: 100%;
    display: inline-flex;
}

<div class="footer-above">
    <div class="container">
        <div class="built-with">
            <h3>ABOUT THIS PAGE</h3>
            <p> Made with HTML5Boilerplate</p>
         </div><!--built-with-->
         <div class="footer-links">
            <h3>AROUND THE WEB</h3>
         </div><!--footer-links-->
    </div><!--container-->
</div><!-- footer-above -->

do you have a non-flexbox solution as well out of curiosity. By the way, this made overrode `margin:0auto` so its no longer center aligned — Vincent Tang, Nov 20 '17 at 03:06

Obsidian Age · Accepted Answer · 2017-11-20T03:11:31.790

I would recommend using flexbox for this, which can be achieved by simply adding:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

If you want to have both boxes occupy the same height, you'll need a fixed height on .footer-links and .built-with. I've gone with 150px in the following example:

.footer-above {
  width: 100%;
  height: 200px;
  background-color: #aaa;
  padding-top: 30px;
  padding-bottom: 30px;
  color: white;
  font-size: 20px;
}

.footer-links,
.built-with {
  display: inline-block;
  max-width: 40%;
  height: 150px;
  border: 2px solid black;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="footer-above">
  <div class="container">
    <div class="built-with">
      <h3>ABOUT THIS PAGE</h3>
      <p> Made with HTML5Boilerplate</p>
    </div><!--built-with-->
    <div class="footer-links">
      <h3>AROUND THE WEB</h3>
    </div><!--footer-links-->
  </div><!--container-->
</div><!-- footer-above -->

Flexbox has support in every browser apart from Internet Explorer (though it's coming to IE as well). If you'd like to support Internet Explorer as well, you can use vertical-align: middle along with display: inline-block, as is demonstrated in this answer.

Hope this helps! :)

hmm but i wanted container to be 960px , so I could run media queries later. — Vincent Tang, Nov 20 '17 at 03:10
You can always include that as well; it won't affect the `flex` :) — Obsidian Age, Nov 20 '17 at 03:12

score 1 · Answer 3 · answered Nov 20 '17 at 03:16

1

Use table-cell as display property

.footer-links,
.built-with {
    display: table-cell;
    max-width: 40%;
    height: 100%;
    border: 2px solid black;
}

I think , it'll horizontally aligned these boxes

answered Nov 20 '17 at 03:16

ChandraShekhar Kaushik

377
1
9

1

isn't tables a bad practice though, I thought it should be semantically reserved for actual tables though – Vincent Tang Nov 20 '17 at 03:20
True, but that doesn't mean you can't be flexible when it comes to solving problems. – Kitanga Nday Nov 20 '17 at 03:24
well , you said you need them to be horizontally aligned. That's what this answer is all about nothing else. you can also use "display:inline-table". – ChandraShekhar Kaushik Nov 20 '17 at 03:46

Vincent Tang · Answer 4 · 2017-11-20T03:36:31.027

this is based off of obsidian ages answer since it wasn't updated to match my exact question.

I edited .footer-above to 1400px since width:100% with code doesn't scale as viewport width changes.

Also, it should be align-items: flex-start; on container class, since i want a baseline at the top of parent div

.footer-above {
  width: 1400px;
  height: 200px;
  background-color: #aaa;
  padding-top: 30px;
  padding-bottom: 30px;
  color: white;
  font-size: 20px;
}

.footer-links,
.built-with {
  display: inline-block;
  width: 40%;
  height: 150px;
  border: 2px solid black;
}

.container {
  margin: 0 auto;
  width: 960px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

<div class="footer-above">
  <div class="container">
    <div class="built-with">
      <h3>ABOUT THIS PAGE</h3>
      <p> Made with HTML5Boilerplate</p>
    </div><!--built-with-->
    <div class="footer-links">
      <h3>AROUND THE WEB</h3>
    </div><!--footer-links-->
  </div><!--container-->
</div><!-- footer-above -->

CSS two column layout not horizontally aligned

4 Answers4