CODEWITHSUNDEEP
htmlcss
QqQq
QqQq

Reputation: 85

Align divs with different content inside wrapper div

I have grid of divs wrapped in other div. For some reason, when content of any grid div is not the same length or type compared to other divs, grid starts to act pretty weird and those divs pops out of place.

I tried align them with margin: 0 auto and text-align: center as recommended in similar questions, but issue seems not to be resolved at all. Any tips will be appreciated.

* {
    box-sizing: border-box;
}

body {
    height: 100%;
    font-family: Arial;
    padding: 0px;
    margin: 0px;
    background: white;
}

.column {
    float: left;
    padding: 10px;
}

.column.middle {
    width: 50%;
    border: 1px solid black;
}

.main {
    text-align:center;
}

.column.side {
    height: 100%;
    width: 25%;
    background-color: #ddd;
    padding-left: 20px;
    border: 1px solid black;
}

.cells {
    display: inline-block;
    height: 150px;
    width: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px solid black;
    margin: 1px;
}

@media (max-width: 800px) {
    .column.side, .column.middle {   
        width: 100%;
        padding: 0;
    }
}

@media (max-width: 400px) {
    .topnav a {
        float: none;
        width:100%;
    }
}
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>

<body>

    <div class="row">
        <div class="column side">
          <div>
            <p>Side column left</p>
          </div>
        </div>
        
        <div class="column middle">
            <div class="main">
              <div class="cells">1</div>
              <div class="cells">2</div>
              <div class="cells"></div>
              <div class="cells">4</div>
              <div class="cells"><p>5</p></div>
              <div class="cells">6</div>
            </div>
        </div>

        <div class="column side">
          <div>
            <p>Side column right</p>
          </div>
        </div>
    </div>

</body>

</html>

Upvotes: 1

Views: 27

Answers (1)

j08691
j08691

Reputation: 207953

You need to set the vertical-align property on the .cells class:

* {
  box-sizing: border-box;
}

body {
  height: 100%;
  font-family: Arial;
  padding: 0px;
  margin: 0px;
  background: white;
}

.header {
  padding: 20px;
  font-size: 20px;
  text-align: center;
  background: #ddd;
}

.topnav {
  overflow: hidden;
  background-color: white;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.column {
  float: left;
  padding: 10px;
}

.column.middle {
  width: 50%;
  border: 1px solid black;
}

.main {
  text-align: center;
}

.column.side {
  height: 100%;
  width: 25%;
  background-color: #ddd;
  padding-left: 20px;
  border: 1px solid black;
}

.cells {
  display: inline-block;
  height: 150px;
  width: 150px;
  line-height: 150px;
  text-align: center;
  border: 1px solid black;
  margin: 1px;
  vertical-align:top;
}

form {
  border: 1px solid black;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Footer */

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  /* margin-top: 20px; */
}

@media (max-width: 800px) {
  .column.side,
  .column.middle {
    width: 100%;
    padding: 0;
  }
}

@media (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
<header>
  <div class="header">
    <h2>Header Placeholder</h2>
  </div>
</header>

<div class="topnav">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>


<div class="row">
  <div class="column side">
    <div>
      <p>Side column left</p>
    </div>
  </div>

  <div class="column middle">
    <div class="main">
      <div class="cells">1</div>
      <div class="cells">2</div>
      <div class="cells"></div>
      <div class="cells">4</div>
      <div class="cells">
        <p>5</p>
      </div>
      <div class="cells">6</div>
    </div>
  </div>

  <div class="column side">
    <div>
      <p>Side column right</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

Upvotes: 1

Related Questions