CODEWITHSUNDEEP
htmlcssflexboxgrid
user9368896
user9368896

Reputation:

Containing columns in row

I've created three columns which I want to contain inside a row which is then contained inside of a section.

For some reason the three columns will not contain inside of the row correctly, Is there a better method or something that I've missed out in the code to correct this?

.column-1-3 {
  width: 29.666%;
  margin-right: 5.5%;
  float: left;
}

.column-last-child {
  margin-right: 0!important;
}

.section {
  width: 100%;
  margin: 40px 0;
  padding: 40px 0;
  position: relative;
}

.row {
  width: 80%;
  max-width: 1080px;
  min-width: 414px;
  margin: auto;
}

.post {
  width: 100%;
  height: auto;
  position: relative;
  background: #000;
  padding: 50px;
}

.video-post {
  background: #000;
  height: 300px;
  width: 100%
}
<div class="section">
  <div class="row">
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3 column-last-child">
      <div class="video-post"></div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 49

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Add display: flex; on row, and remove float property from column-1-3:

.column-1-3 {
  width: 30%;
}

.section {
  width: 100%;
  margin: 40px 0;
  padding: 40px 0;
  position: relative;
}

.row {
  display: flex;
  width: 80%;
  max-width: 1080px;
  min-width: 414px;
  margin: auto;
  justify-content: space-between;
}

.post {
  width: 100%;
  height: auto;
  position: relative;
  background: #000;
  padding: 50px;
}

.video-post {
  background: #000;
  height: 300px;
  width: 100%
}
<div class="section">
  <div class="row">
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
  </div>
</div>

You also dont need to set margins with flex. Just keep width: 30% on columns and use justify-content: space-between; on rows.

Upvotes: 2

Related Questions