How can I fix the middle column not having padding?

Question

I am making a copycat Drudge Report website for practice.

While coding, I noticed that the padding doesn’t seem to work on the middle column. There’s no spaces next to the <hr> / separation lines, which really messes with the overall look.

a {
  color: black;
}

.container {
  font-size: 12.5px;
}

.top-list ul {
  margin: 0;
  margin-top: 70px;
  padding: 0;
  font-family: COURIER, sans-serif;
  font-weight: bolder;
  list-style: none;
  text-decoration: underline;
}

.top-list li:nth-child(3) a {
  color: red;
  text-decoration: underline;
  text-decoration-color: red;
}

.top-list li:nth-child(10) a {
  color: red;
  text-decoration: underline;
  text-decoration-color: red;
}

.main-image {
  margin-top: 30px;
  text-align: center;
}

.middle-text {
  font-family: ARIAL, VERDANA, HELVETICA;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

.middle-text p {
  margin: 0px;
  padding: 0px;
  font-size: 47px;
}

.middle-text img {
  margin-bottom: 45px;
}

.left-column {
  float: left;
  width: 33%;
  padding-right: 5px;
  font-family: COURIER, sans-serif;
  text-decoration: underline;
  font-weight: bolder;
  border-right: 1px solid #000;
  height: 2460px;
}

.left-column img {
  width: 200px;
}

.middle-column {
  text-align: center;
  width: 33%;
  padding-left: 5px;
  padding-right: 5px;
  font-family: COURIER, sans-serif;
  text-decoration: underline;
  font-weight: bolder;
}

.middle-column img {
  width: 200px;
}

.right-column {
  float: right;
  width: 33%;
  padding-left: 5px;
  font-family: COURIER, sans-serif;
  text-decoration: underline;
  font-weight: bolder;
  border-left: 1px solid #000;
  height: 2460px;
}

.right-column img {
  width: 200px;
}

<!-- Left Column -->

<div class="left-column">
  <div class="container">
    <a href="http://www.zerohedge.com/">ZERO HEDGE</a>
    <hr>
  </div>
</div>

<!-- Right Column -->

<div class="right-column">
  <div class="container">
    <img src="images/people.jpg">
    <p><a href="https://apnews.com/article/donald-trump-pandemics-europe-basketball-meghan-markle-abc35f110e954524437eb7142912cd6a">In year dominated by pandemic, many other dramas unfolded...</a></p>
    <hr>
  </div>
</div>

<!-- Middle Column -->

<div class="middle-column">
  <div class="container">
    <img src="images/person.jpg" alt="Person">
    <hr>
    <p><a href="https://www.independent.co.uk/news/world/americas/virgin-galactic-space-plane-test-abort-b1771292.html">GALACTIC forced to abort key test flight of space plane...</a></p>
    <p><a href="https://apnews.com/article/space-tourism-new-mexico-us-news-coronavirus-pandemic-bccddfbcb8019dd7e3a58c320d5f79c4"><i>Rocket motor fails to ignite...</i></a></p>
  </div>
</div>

The full HTML can be found on PasteBin.

Answer 1

It looks like HTML/CSS above is using float CSS property to achieve 3-column layout.

This is old and inefficient way (Flexbox is preferred for columns, Grid for more complex layouts).

The caveat with using float is that middle-column should not have width set to it and should have margin-left and margin-right which match left and right column sizes. Here's an example.

.middle-column {
  /* width: 33%; do not apply width, it would not fit */
  margin-left: 33%; /* skip over left column */
  margin-right: 33%; /* skip over right column */
}

The above style should fix the issue. But I'd recommend looking at Flexbox guide.

Flexbox could handle this use-case and more. It's well supported by current browsers.

Here's 3 column layout using Flexbox:

.flex-row {
  display: flex;
  flex-direction: row;
}

.left-column {
  width: 33%;
}

.right-column {
  width: 33%;
}

.middle-column {
  width: 33%;
}

<div class="flex-row">
  <div class="left-column">
    Left column
  </div>

  <div class="middle-column">
    Middle column
  </div>

  <div class="right-column">
    Right column
  </div>
</div>

P.S.

CSS grid is an even more advanced technique (as suggested in comments). It is well supported by modern browsers, but has limited functionality in Internet Explorer.