CODEWITHSUNDEEP
htmlcss
YaBCK
YaBCK

Reputation: 3029

Get elements to align

I'm currently working on some black boards on my website and sometimes the content isn't the same size in each black board.

so what I've currently got is as following:

enter image description here

Achieved this by using the following code: 

var biggestHeight = 0;
$('.board .content').each(function(){
    if(biggestHeight === 0) biggestHeight = $(this).height();
    if(biggestHeight < $(this).height()) bigghestHeight = $(this).height();
});
biggestHeight = biggestHeight + 15;
$('.board .content').css({
    "height" : biggestHeight + "px",
});

I want the boards to be like this: but I want the boards to be different sizes depending on the content size, however I want the boards to be aligned at the bottom behind the grass like the first picture.

enter image description here

Simple example to reproduce the problem (Not exactly reproduced): 

.board{
  display: inline-block;
  background: gray;
  width: 30%;
  float: left;
  margin-left: 5px;
}
#boards-container{
  position: relative;
  width: 400px;
}
#boards-container .boards{
  position: absolute
}
<div id="boards-container">
  <div class="boards">
      <div class="board">
        <p>1st Event</p>
        <p>2nd Event</p>
        <p>3rd Event 3rd Event 3rd Event 3rd Event 3rd Event</p>
      </div>
      <div class="board">
        (This should align at bottom)
        <p>1st News</p>
      </div>
      <div class="board">
        (This should align at bottom)
        <p>1st Gallery</p>
        <p>2nd Gallery</p>
        <p>3rd Gallery</p>
      </div>
  </div>
</div>

NEED ANSWER TO WORK IN IE9+ aswell

Upvotes: 2

Views: 71

Answers (4)

pixlboy
pixlboy

Reputation: 1502

Perhaps not a perfect solution as it does not work in Internet Explorer. Just a different approach towards the problem using CSS grid.

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns:  repeat(3, 140px);
  grid-template-rows: repeat( 4, 70px);
  background-color: #fff;
  color: #444;
}

.box {
  background: #ccc;
  border: 1px solid #444;
  padding: 10px;
  font-size: 14px;
}


.a {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
}

.b {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
}

.c {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: stretch;
}
<div class="wrapper">
  <div class="box a">
    <p>1st Event</p>
    <p>2nd Event</p>
    <p>3rd Event 3rd Event 3rd Event 3rd Event 3rd Event</p>
  </div>
  <div class="box b">
    (This should align at bottom)
          <p>1st News</p>       
  </div>
  <div class="box c">
    (This should align at bottom)
      <p>1st Gallery</p>
      <p>2nd Gallery</p>
      <p>3rd Gallery</p>
  </div>
</div>

Upvotes: 0

Dayne
Dayne

Reputation: 28

Depending on your overall desired outcome. It might be as simple as setting some css on those boards - position:absolute and bottom:0

Upvotes: 0

Miro
Miro

Reputation: 8650

I like @Hash 's answer more but here's a non-flexbox version just in case.

Downside is it requires extra wrapper div for each board

.board{
  display: table-cell;
  vertical-align:bottom;
  background: gray;
  width: 30%;
  margin-top:auto;
  
}
#boards-container{
  position: relative;
  width: 400px;
}
#boards-container .boards{
  position: absolute
}

.wrap{
  margin-left: 5px;
  display:inline-block;
  background:red;
}
<div id="boards-container">
  <div class="boards">
      <div class="board">
        <div class="wrap">
          <p>1st Event</p>
          <p>2nd Event</p>
          <p>3rd Event 3rd Event 3rd Event 3rd Event 3rd Event</p>
          </div>
      </div>
      <div class="board">
        <div class="wrap">
          (This should align at bottom)
          <p>1st News</p>
        </div>
      </div>
      <div class="board">
       <div class="wrap">
          (This should align at bottom)
          <p>1st Gallery</p>
          <p>2nd Gallery</p>
          <p>3rd Gallery</p>
        </div>
      </div>
  </div>
</div>

Upvotes: 2

Hash
Hash

Reputation: 8020

To align you can use flex with flex-end to align at the bottom of the container. More about flex align

.boards {
  display: flex;
  align-items: flex-end;
}

.board {
  display: inline-block;
  background: gray;
  width: 30%;
  float: left;
  margin-left: 5px;
}

#boards-container {
  position: relative;
  width: 400px;
}

#boards-container .boards {
  position: absolute
}
<div id="boards-container">
  <div class="boards">
    <div class="board">
      <p>1st Event</p>
      <p>2nd Event</p>
      <p>3rd Event 3rd Event 3rd Event 3rd Event 3rd Event</p>
    </div>
    <div class="board">
      (This should align at bottom)
      <p>1st News</p>
    </div>
    <div class="board">
      (This should align at bottom)
      <p>1st Gallery</p>
      <p>2nd Gallery</p>
      <p>3rd Gallery</p>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions