Can someone explain why the boxes are not all even

Can’t seem to figure out why all of the boxes are not even and why one box is all the way at the bottom.

https://colethelion321.github.io/aboutus.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.container {
  padding: 0 8px;
}
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
.title {
  color: grey;
}
.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}
.button:hover {
  background-color: #555;
}
</style>
</head>
<body>

<h2>Meet The Team</h2>
<br>
  
    <div class="column">
    <div class="card">
      <img src="img1.jpg" alt="Cole" style="width:100%">
      <div class="container">
        <h2>Cole Lyons</h2>
        <p class="title">CEO and Founder</p>
        <p>People Think I work Hard</p>
        <p>Yomama@yomama.plum</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>


  <div class="column">
    <div class="card">
      <img src="img2.jpg" alt="Ace" style="width:100%">
      <div class="container">
        <h2>Ace Powel</h2>
        <p class="title">Chief Systems Engineer</p>
        <p>I dabble in scripting(basically I built the internet).</p>
        <p>Yomama@yomama.plum</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="Jayden" style="width:100%">
      <div class="container">
        <h2>Jayden Fnadozi</h2>
        <p class="title">Chief Network Engineer</p>
        <p>I'm The one who actually built the internet.</p>
        <p>yomama@yomama.plum</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
  
   <div class="column">
    <div class="card">
      <img src="img4.jpg" alt="Sundar" style="width:100%">
      <div class="container">
        <h2>Sundar Pichai</h2>
        <p class="title">Chief Software Engineer</p>
        <p>I don't Belong Here.</p>
        <p>yomama@yomama.plum</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <img src="img5.jpg" alt="Jade" style="width:100%">
      <div class="container">
        <h2>Jade Raymond</h2>
        <p class="title">Chief Executive</p>
        <p>They Only hired me becasue I'm a women.</p>
        <p>yomama@yomama.plum</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
</div>
    </body>
</html>
2 Likes

Suggest always validate before posting code. It roots out the obvious errors and warnings. Your code has one warning, and two errors.

The warning is to include a lang attribute on the html element opentag.

<html lang="EN">

The errors are,

1. No <title></title> element in the <head></head>
2. Stray endtag (</div>) just before </body>

This style rule should be in the CSS.

.card img { width: 100%; }

Avoid inline styles at all turns, especially those that are repeated. Only in exceptional cases should an inline style attribute ever be used. When it applies to only a single page of many, then an embedded style sheet (in the HEAD) can be written to that page, or a custom sheet imported (last in load order).

I’m not a big fan of the universal selector, owing that in older browsers it comes at a huge expense on resources. Maybe today’s browsers do a better job of mapping, but I will need to be convinced there is a tangible value to universal selector rules. If you are well informed and have an argument for this rule, please oblige us.

Regardless what box model we use, it is tricky to dial in the precise width of float containers. I have found over the years that it is advantageous to give a little bit of leeway. Test with 33%, and reduce until you have a nice fit on all three columns.

From a standpoint of organization, @media queries should be at the bottom of the style sheet. It also puts them lower in the cascade so everything else is already declared, and easier to override.

Going to test your page locally and will get back to you with my findings.

4 Likes

Okay, did the minor tweaks to the HTML and touched up the style sheet, old school…

index.html
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="UTF-8">
<title>Meet The Team</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="author" href="https://discuss.codecademy.com/t/can-someone-explain-why-the-boxes-are-not-all-even/389290">
<style>
.column {
  float: left;
  width: 33%;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.card {
  margin: 1%;
  padding: 1%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.card img { width: 100%; }
.container {
  padding: 1%;
  height: 13em;
  position: relative;
}
.title {
  color: grey;
}
address {
  position: absolute;
  bottom: 2%;
  width: 100%;
}
.button,
address p {
  text-align: center;
}
.button {
  padding: 1%;
  color: white;
  background-color: #000;
  cursor: pointer;
  width: 98%;
  border-radius: 5px;
}
.button:hover {
  background-color: #555;
}
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}
</style>
</head>
<body>

<h2>Meet The Team</h2>
<br>
  
    <div class="column">
    <div class="card">
      <img src="img1.jpg" alt="Cole">
      <div class="container">
        <h2>Cole Lyons</h2>
        <p class="title">CEO and Founder</p>
        <p>People Think I work Hard</p>
        <address>
          <p>Yomama@yomama.plum</p>
          <button class="button">Contact</button>
        </address>
      </div>
    </div>
  </div>


  <div class="column">
    <div class="card">
      <img src="img2.jpg" alt="Ace">
      <div class="container">
        <h2>Ace Powel</h2>
        <p class="title">Chief Systems Engineer</p>
        <p>I dabble in scripting(basically I built the internet).</p>
        <address>
          <p>Yomama@yomama.plum</p>
          <button class="button">Contact</button>
        </address>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="img3.jpg" alt="Jayden">
      <div class="container">
        <h2>Jayden Fnadozi</h2>
        <p class="title">Chief Network Engineer</p>
        <p>I'm The one who actually built the internet.</p>
        <address>
          <p>yomama@yomama.plum</p>
          <button class="button">Contact</button>
        </address>
      </div>
    </div>
  </div>
  
   <div class="column">
    <div class="card">
      <img src="img4.jpg" alt="Sundar">
      <div class="container">
        <h2>Sundar Pichai</h2>
        <p class="title">Chief Software Engineer</p>
        <p>I don't Belong Here.</p>
        <address>
          <p>yomama@yomama.plum</p>
          <button class="button">Contact</button>
        </address>
      </div>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <img src="img5.jpg" alt="Jade">
      <div class="container">
        <h2>Jade Raymond</h2>
        <p class="title">Chief Executive</p>
        <p>They Only hired me becasue I'm a women.</p>
        <address>
          <p>yomama@yomama.plum</p>
          <button class="button">Contact</button>
        </address>
      </div>
    </div>
  </div>
</body>
</html>
2 Likes

So the reason I did a bang up job is because DevOps wasn’t working and I did this by hand. Not using an IDE or editor.

1 Like

Thank you so much for your help. I really really appreciate it.

Much love, -Cole lyons.

2 Likes

If you need some explanation of my reasoning, just ask. I use a text editor and a browser. Nothing fancy. If you never work with CSS 1 and 2 on purpose you never learn the bridges we have to cross that Bootstrap, Flexbox, and Grids have helped to jump. Learn the early approaches, even if you don’t use them in your production work.

cole_lyons_three_col_float

3 Likes