CODEWITHSUNDEEP
htmlcssw3.css
Alan
Alan

Reputation: 13

W3.CSS Equal Col Heights

I am having trouble getting columns to have equal heights. I am using W3.CSS, and it seems something is preventing the typical table/table-cell option to work. I have also tried the w3-cell class, however, it does not work either. Below is the code an a fiddle link showing the issue.

    body,
html {
  height: 100%;
  line-height: 1.8;
}
/* Full height image header */

.w3-bar .w3-button {
  padding: 16px;
}

.mySlides {
  display: none
}

.w3-tag,
.fa {
  cursor: pointer
}

.w3-tag {
  height: 15px;
  width: 15px;
  padding: 0;
  margin-top: 6px
}
.w3-row {
display: table !important;
width: 100% !important;
}
.w3-col {
display: table-cell !important;
padding: 16px !important;
}


<div class="w3-row">
  <div class="w3-col l3 m6 w3-light-grey w3-padding-16">
    <h3>One</h3>
    <p>One</p>
  </div>
  <div class="w3-col l3 m6 w3-grey w3-padding-16">
    <h3>Two</h3>
    <p>Two
      <br/>Two</p>
  </div>
  <div class="w3-col l3 m6 w3-dark-grey w3-padding-16">
    <h3>Three</h3>
    <p>Three
      <br/>Three
      <br/>Three</p>
  </div>
  <div class="w3-col l3 m6 w3-black w3-padding-16">
    <h3>Four</h3>
    <p>Four
      <br/>Four
      <br/>Four
      <br/>Four</p>
  </div>
</div>

https://jsfiddle.net/taneralan/ot2zep4d/4/

EDIT:

As a temporary fix I have adjusted the code to below.

.col-container {
display: table;
width: 100%;
}
.col {
display: table-cell;
padding: 16px;
width: 25%;
}

@media only screen and (max-width: 600px) {
.col { 
    display: block;
    width: 100%;
}
}

<div class="col-container">
<div class="col w3-light-grey w3-padding-16">
 <h3>One</h3>
 <p>One</p>
</div>
<div class="col w3-grey w3-padding-16">
 <h3>Two</h3>
 <p>Two
 <br/>Two
 </p>
</div>
<div class="col w3-dark-grey w3-padding-16">
 <h3>Three</h3>
 <p>Three
 <br/>Three
 <br/>Tree
 </p>
</div>
<div class="col w3-black w3-padding-16">
 <h3>Four</h3>
 <p>Four
 <br/>Four
 <br/>Four
 <br/>Four
 </p>
</div>

Upvotes: 0

Views: 1560

Answers (2)

Nidhi
Nidhi

Reputation: 1443

w3-col applies float:left so this error occurs, so solve this and keep your structure, you have to use w3-cell in place of w3-col and change your html structure as snippet or you can apply float:none to w3-col

Edit: for small screen you can apply media query css check updated snippet for that

    body,
    html {
      height: 100%;
      line-height: 1.8;
    }
    /* Full height image header */
    
    .w3-bar .w3-button {
      padding: 16px;
    }
    
    .mySlides {
      display: none
    }
    
    .w3-tag,
    .fa {
      cursor: pointer
    }
    
    .w3-tag {
      height: 15px;
      width: 15px;
      padding: 0;
      margin-top: 6px
    }
    .w3-row {
    display: table !important;
    width: 100% !important;
}
.w3-col {
    display: block !important;
    padding: 16px !important;
    float: none !important;
}

@media (min-width: 601px) {
  .w3-col {
    display: table-cell !important;
    width: 50%;
    
  }
}
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <body>
    <div class="w3-row">
      <div class="w3-col l3 m6 w3-light-grey w3-padding-16">
        <h3>One</h3>
        <p>One</p>
      </div>
      <div class="w3-col l3 m6 w3-grey w3-padding-16">
        <h3>Two</h3>
        <p>Two
          <br/>Two</p>
      </div>
    </div>
    <div class="w3-row">
      <div class="w3-col l3 m6 w3-dark-grey w3-padding-16">
        <h3>Three</h3>
        <p>Three
          <br/>Three
          <br/>Three</p>
      </div>
      <div class="w3-col l3 m6 w3-black w3-padding-16">
        <h3>Four</h3>
        <p>Four
          <br/>Four
          <br/>Four
          <br/>Four</p>
      </div>
    </div>
  </body>

Upvotes: 1

Shaik
Shaik

Reputation: 378

.w3-cell {
    height:200px;
    overflow-y:scroll;
    overflow-x:hidden;
    padding: 16px !important;
}

Replace with this in your css

Upvotes: 0

Related Questions