2

Just wondering how to have the title (dark red section) the same height in all columns with flexbox? The title needs to be as tall as the tallest title in the group.

So in this example below, the Event 2 & Event 3 header needs to be the same height as the "Really long event title" header.

enter image description here

The markup looks like this

<div class="event">
   <div class="event__header">
     <h1>Event Title</h1>
   </div>
   <div class="event__content">
     ...
   </div>
</div>

Thanks in advance

Joshua Russell
  • 670
  • 5
  • 13

4 Answers4

2

Flexbox is not an option, because they are in different div. If you are using jQuery then you can achieve this with following snippet.

$(document).ready(function (){
  var maxHeight = 0;
  for(i=0;i<$(".event_header").length;i++){
    if($(".event_header").eq(i)){
      var currentHeight = $(".event_header").eq(i).height();
      if(currentHeight>=maxHeight){
        maxHeight = currentHeight;
      }
    }
    else{
      break;
    }
  }
  $(".event_header").height(maxHeight);
});

Here is a live example:

$(document).ready(function (){
  var maxHeight = 0;
  for(i=0;i<$(".event_header").length;i++){
    if($(".event_header").eq(i)){
      var currentHeight = $(".event_header").eq(i).height();
      if(currentHeight>=maxHeight){
        maxHeight = currentHeight;
      }
    }
    else{
      break;
    }
  }
  $(".event_header").height(maxHeight);
})
*{
  box-sizing:border-box;
}
.conDiv{
  border:1px sold black;
  float:left;
  width:33%;
  margin:0;
  padding:10px;
  height:300px;
  background-color:green;
}
.contentDiv{
  height:200px;
  width:100%;
  margin:0;
  padding:0;
  background-color:red;
}
.event_header{
  width:100%;
  margin:0;
  padding:0;
  background-color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">This is a really really really really really really  reallyreally really really really long title</h2>
      <div class="contentDiv"></div>
    </div>
ab29007
  • 7,611
  • 2
  • 17
  • 43
  • Hmm, yeah not really looking to use jQuery in this instance. I didn't think it was possible, but thought I'd put the question to the community just incase someone has done this before. Thanks anyway! – Joshua Russell Dec 22 '16 at 05:53
  • yeah, I too hope there is some other way. – ab29007 Dec 22 '16 at 05:56
0

You need to give the min height for event_header in

.event__header{min-height:100px}
Bhupinder kumar
  • 558
  • 1
  • 5
  • 19
0

You can achieve this with flex box if you can wrap all the divs with the title into a parent div. If that is possible, setting the display of the parent div to flex should do it for you.

.parent {
  display:flex;
}

This may help: https://jsfiddle.net/75xoj1so/

Yathi
  • 1,011
  • 1
  • 12
  • 21
-1

*{
  box-sizing:border-box;
}
.conDiv{
  border:1px sold black;
  float:left;
  width:33%;
  margin:0;
  padding:10px;
  height:300px;
  background-color:green;
}
.contentDiv{
  height:150px;
  width:100%;
  margin:0;
  padding:0;
  background-color:red;
}
.event_header{
  width:100%;
  margin:0;
  padding:0;
  background-color:white;
  min-height:100px
}
<div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">This is a really really really really really really  reallyreally really really really long title</h2>
      <div class="contentDiv"></div>
    </div>
react_or_angluar
  • 1,568
  • 2
  • 13
  • 20