0

I have a stack of three, w3-card, elements on my HTML sheet that are next to each other in a row. I've been working on this since this past Friday and I've tried everything I can think of.

Here's what I got for my code:

<div class="w3-cell-row">
  <a href="www.testsite.com" style="color: #232f3e";> 
    <div class="w3-cell w3-third">
        <div class="w3-container w3-card" style="text-align: center;">
            <h3> 
                <br/> 
            </h3>
            <h3>h3 title<br/><br/></h3>
            <div> 
                <i class="fa fa-info-circle" aria-hidden="true" style="font-size: 120px;"></i>
                <br/>​​<br/> 
            </div>
            <div>
                <h4>Click here for:<br/></h4>
            </div>
            <div>
            <br/> 
                <p>text<br/></p>
                <p>text<br/></p>
                <p>text​<br/><br/></p>
            <br/> 
            </div>​ 
        </div>
    </div>
    </a>​​
    <a href="www.testsite2.com" style="color: #232f3e";> 
    <div class="w3-cell w3-third">
        <div class="w3-container w3-card" style="text-align: center;">
            <h3> 
                <br/> 
            </h3>
            <h3>h3 title<br/><br/></h3>
            <div>
                <i class="fa fa-question" aria-hidden="true" style="font-size: 120px;"></i>​
                <br/><br/> 
            </div>
            <div>
                <h4>Click here for:​<br/></h4>
            </div>
            <div> 
            <br/>
                <p>text<br/></p>
                <p>text<br/></p>
                <p>text<br/><br/></p>
            <br/>
            </div>
        </div>
    </div>
  </a>
  <a href="www.testsite3.com" style="color: #232f3e";> 
    <div class="w3-cell w3-third">
        <div class="w3-container w3-card" style="text-align: center;">
            <h3> 
            <br/> 
            </h3>
            <h3>h3 title<br/><br/></h3>
            <div> 
                <i class="fa fa-globe" aria-hidden="true" style="font-size: 120px;">​</i>​
                <br/><br/>
            </div>
            <div>
                <h4>Click here for:​<br/></h4>
            </div>
            <div> 
            <br/>
                <p>test<br/></p>
                <p>test<br/></p>
                <p>tests<br/></p>
                <p>tests<br/></p>
                <p>tests<br/></p>
                <p>tests<br/></p>
                <p>tests<br/></p>
            <br/>
            </div>
        </div>  
    </div>
  </a>
</div>

In one card, I have a bunch of text that pushes the bottom further out than the other two cards. The a href tag surrounds each individual card so that it's clickable. I'm also using FontAwesome.css to add icons.

What I want is for all three cards to match the height of the card with the most text in it. So, if content should change and one box gets more text than another, it will line up at the top and bottom of all three cards (in a row). This should stay the same if the window should change in width as well.

Here is the reference for the W3.css code I'm using and here is the location of the style sheet itself. Also, here is the specific reference I am using in the code to try to make this work.

Thank you very much for your time.

Edit: I tried using the flex property by assigning the main div with class "w3-cell-row" with class "flex-test". Then, I assigned this class with the following properties on my CSS file:

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

The w3-third property messes up everything and when I remove it, I get a semi-ok look where it's basically the same thing: no adjusting for a uniform bottom.

Rob
  • 14,746
  • 28
  • 47
  • 65
user87826
  • 11
  • 2

2 Answers2

1

Ok, I think I found the solution:

first: you have some erros in this code, like styles inline with ; outside ""

example: style="color: #232f3e";

Then: 

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="w3-cell-row">
      <div class="w3-container w3-cell">
        <a href="www.testsite.com" style="color: #232f3e" ;>
          <div class="w3-card" style="text-align: center;">
            <h3>
              <br />
            </h3>
            <h3>h3 title<br /><br /></h3>
            <div>
              <i
                class="fa fa-info-circle"
                aria-hidden="true"
                style="font-size: 120px;"
              ></i>
              <br />​​<br />
            </div>
            <div>
              <h4>Click here for:<br /></h4>
            </div>
            <div>
              <br />
              <p>text<br /></p>
              <p>text<br /></p>
              <p>text​<br /><br /></p>
              <br />
            </div>
            ​
          </div> </a
        >​​
      </div>

      <div class="w3-container w3-cell">
        <a href="www.testsite2.com" style="color: #232f3e" ;>
          <div class=" w3-card" style="text-align: center;">
            <h3>
              <br />
            </h3>
            <h3>h3 title<br /><br /></h3>
            <div>
              <i
                class="fa fa-question"
                aria-hidden="true"
                style="font-size: 120px;"
              ></i
              >​ <br /><br />
            </div>
            <div>
              <h4>Click here for:​<br /></h4>
            </div>
            <div>
              <br />
              <p>text<br /></p>
              <p>text<br /></p>
              <p>text<br /><br /></p>
              <br />
            </div>
          </div>
        </a>
      </div>

      <div class="w3-container w3-cell">
        <a href="www.testsite3.com" style="color: #232f3e" ;>
          <div class=" w3-card" style="text-align: center;">
            <h3>
              <br />
            </h3>
            <h3>h3 title<br /><br /></h3>
            <div>
              <i
                class="fa fa-globe"
                aria-hidden="true"
                style="font-size: 120px;"
                >​</i
              >​ <br /><br />
            </div>
            <div>
              <h4>Click here for:​<br /></h4>
            </div>
            <div>
              <br />
              <p>test<br /></p>
              <p>test<br /></p>
              <p>tests<br /></p>
              <p>tests<br /></p>
              <p>tests<br /></p>
              <p>tests<br /></p>
              <p>tests<br /></p>
              <br />
            </div>
          </div>
        </a>
      </div>
    </div>
  </body>
</html>

And you need to add these css:

.w3-cell-row {
  display: flex;
}

.w3-container {
  flex:1;
}

.w3-card {
  height: 100%;
}

here you have my code: please review it. I have found that containers should go with w3-cell instead of w3-card, and containers are the same height (not cards). Also, I have removed w3-third because it is no need.

Hope it helps you and sorry for not being more specific, is just I have to go to work. Cheers!

Richard Fazzi
  • 433
  • 3
  • 9
  • I know you're on the way to work but I just wanted to report back: this code doesn't work. The boxes are now not even within the same row and the third box is on the next row (which is weird). I triple checked to ensure I didn't have any errors and I had copied your code exactly. – user87826 Dec 16 '19 at 22:48
  • sorry, give me a couple of hours I finish my class and I will get back to you – Richard Fazzi Dec 16 '19 at 22:50
  • @user87826 I had 2 min and I tested it in a new html, I'm still seeing this correctly. Can you try if I change the code including an html complete page? – Richard Fazzi Dec 16 '19 at 22:54
  • I just threw your code and my css into codepen and it's the same thing on my screen: uneven boxes. – user87826 Dec 16 '19 at 22:57
  • @user87826 I don't know what is going on. I have it running here and working perfectly and it doesn't work in codepen. I have added styles, have you seen them? – Richard Fazzi Dec 17 '19 at 11:22
  • Worked for me man !! Thank you so much .. I wonder why w3 css does not support this or have enough documentation around this. – Metalhead Sep 02 '22 at 11:22
0

Just answering the question to any who would answer it. This was my solution:

 <div class="w3-cell-row">
  <div class="w3-container w3-cell">
      <div class="w3-container w3-card w3-cell" style="text-align: center;">
        <h3>
          <br />
        </h3>
        <h3>h3 title<br /><br /></h3>
        <div>
          <i
            class="fa fa-info-circle"
            aria-hidden="true"
            style="font-size: 120px;"
          ></i>
          <br />​​<br />
        </div>
        <div>
          <h4>Click here for:<br /></h4>
        </div>
        <div>
          <br />
          <p>text<br /></p>
          <p>text<br /></p>
          <p>text​<br /><br /></p>
          <br />
        </div>​
      </div>
  </div>

  <div class="w3-container w3-cell">
      <div class="w3-container w3-card w3-cell" style="text-align: center;">
        <h3>
          <br />
        </h3>
        <h3>h3 title<br /><br /></h3>
        <div>
          <i
            class="fa fa-question"
            aria-hidden="true"
            style="font-size: 120px;"
          ></i
          >​ <br /><br />
        </div>
        <div>
          <h4>Click here for:​<br /></h4>
        </div>
        <div>
          <br />
          <p>text<br /></p>
          <p>text<br /></p>
          <p>text<br /><br /></p>
          <br />
        </div>
      </div>
  </div>

  <div class="w3-container w3-cell">
      <div class="w3-container w3-card w3-cell" style="text-align: center;">
        <h3>
          <br />
        </h3>
        <h3>h3 title<br /><br /></h3>
        <div>
          <i
            class="fa fa-globe"
            aria-hidden="true"
            style="font-size: 120px;"
            >​</i
          >​ <br /><br />
        </div>
        <div>
          <h4>Click here for:​<br /></h4>
        </div>
        <div>
          <br />
          <p>test<br /></p>
          <p>test<br /></p>
          <p>tests<br /></p>
          <p>tests<br /></p>
          <p>tests<br /></p>
          <p>tests<br /></p>
          <p>tests<br /></p>
          <br />
        </div>
      </div>
    </a>
  </div>
</div>

All I did was remove the link. Some how in the hierarchy of the divs, having that link there caused all the problems. After removing it, it reacts and lines up perfectly.

user87826
  • 11
  • 2