Div height 100% of content

Question

I have an easy question for CSS guru that is ruining my weekend. Basically I have a div with an image on the left and some text on the right. I need that the box height is the same of the content text so for example in the image below the last line is outside the box while I need that the box is height like the content.

I cannot use fixed height due to the text can change inside the box, I need only a min-height already defined.

Some guru can help me?

<a href="#" class="myClass">
    <div class="postImageUrl" style="overflow:hidden; z-index: 10; max-width: 100%;">
        <div class="imgUrl" style="background-image:url(http://cdn8.openculture.com/wp-content/uploads/2015/03/17231820/Lorem-Ipsum.jpg);">
        </div>
    </div>
    <div class="centered-text-area clearfix">
        <div class="centered-text">
            <div class="myClass-content">
                <div class="ctaText" style="float:left;">
                    UpNeXt
                </div>
                <div style="clear:both;"></div>
                <div class="postTitle" style="float:left;">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
                </div>
            </div>
        </div>
    </div>
</a>

And this is the <style>

.myClass 
, .myClass .postImageUrl 
, .myClass .imgUrl 
, .myClass .centered-text-area {
    min-height: 100px;
    position: relative;
}
.myClass
, .myClass:hover
, .myClass:visited
, .myClass:active {
    border:0!important;
}
.myClass {
    display: block;
    transition: background-color 250ms;
    webkit-transition: background-color 250ms;
    width: 100%;
    opacity: 1;
    transition: opacity 250ms;
    webkit-transition: opacity 250ms;
    background-color: #eaeaea;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
}
.myClass:active
, .myClass:hover {
    opacity: 1;
    transition: opacity 250ms;
    webkit-transition: opacity 250ms;
    background-color: #FFFFFF;
}
.myClass .postImageUrl
, .myClass .imgUrl {
    background-position: center;
    background-size: cover;
    float: left;
    margin: 0;
    padding: 0;
}
.myClass .postImageUrl {
    width: 30%;
}
.myClass .imgUrl {
    width: 100%;
}
.myClass .centered-text-area {
    float: right;
    width: 70%;
}
.myClass .centered-text {
    display: table;
    min-height: 100px;
    left: 0;
    position: absolute;
    top: 0;
}
.myClass .myClass-content {
    display: table-cell;
    margin: 0;
    padding: 0 74px 0 18px;
    position: relative;
    vertical-align: middle;
    width: 100%;
}
.myClass .ctaText {
    border-bottom: 0 solid #fff;
    color: #34495E;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: .125em;
    margin: 0;
    padding: 0;
    text-decoration: underline;
}
.myClass .postTitle {
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}
.myClass .ctaButton {
    background-color: #FFFFFF;
    margin-left: 10px;
    position: absolute;
    right: 0;
    top: 0;
}
.myClass:hover .imgUrl {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.myClass .imgUrl {
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    -moz-transition: -moz-transform 0.4s ease-in-out;
    -o-transition: -o-transform 0.4s ease-in-out;
    -ms-transition: -ms-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
}

You can find the problem here http://jsfiddle.net/L26s1vc5/

This is what I see now

While this is what I expect to have:

The min-height is 100px. I already tested with height:100%, overflow-y:auto, height:auto without success :(

Thanks for your help, Alex.

Answer 1

https://jsfiddle.net/dixalex/ojoevj1k/

The fiddle has the solution done via jQuery using the .height() call and JavaScript using the setInterval call. Every 50 milliseconds, the function will check to see if the image height is the same height as the container with the text. If they are not equal in pixel height, CSS is applied directly to make them equal.

Since this is dynamic, I did not have to change any of your CSS.

var makeSameHeight = setInterval( function() {
    var currentTextHeight = $('div.myClass-content').height() + "px";
    var imgDivHeight = $('div.imgUrl').height() + "px";
    if (currentTextHeight === imgDivHeight)
    {
        var doNothing = "";
    } else {
        $('div.imgUrl, div.postImageUrl, a.myClass').css("height", currentTextHeight);
    }
}, 50);

Answer 2

You have two issues causing your problem. You have a clearing issue and an absolute positioning issue. Inside of .myClass you have two floated divs. That alone would cause the issue you are having. You've even attempted to fix it in two places. You added a class of clearfix in one place (which would only work if you had a css rule to match). You also have an empty div with an inline styling of clear: both;, though for that to work you would need to have it as the third div in your link.

Still, even if either of the above were working properly the issue wouldn't have been fixed. This is because of your absolute positioning on .centered-text. When you absolutely position something you take it out of the flow of your document. This means that it's parent has no idea the size of what's inside of it. All of your sizing was coming from your liberal use of min-height: 100px. If you remove the absolute positioning on .centered-text and use the clearfix properly then your code works just fine.

.myClass,
.myClass .postImageUrl,
.myClass .imgUrl,
.myClass .centered-text-area {
  min-height: 100px;
  position: relative;
}
.myClass,
.myClass:hover,
.myClass:visited,
.myClass:active {
  border: 0!important;
}
.myClass {
  display: block;
  transition: background-color 250ms;
  webkit-transition: background-color 250ms;
  width: 100%;
  opacity: 1;
  transition: opacity 250ms;
  webkit-transition: opacity 250ms;
  background-color: #eaeaea;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
  -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
}
.myClass:active,
.myClass:hover {
  opacity: 1;
  transition: opacity 250ms;
  webkit-transition: opacity 250ms;
  background-color: #FFFFFF;
}
.myClass .postImageUrl,
.myClass .imgUrl {
  background-position: center;
  background-size: cover;
  float: left;
  margin: 0;
  padding: 0;
}
.myClass .postImageUrl {
  width: 30%;
}
.myClass .imgUrl {
  width: 100%;
}
.myClass .centered-text-area {
  float: right;
  width: 70%;
}
.myClass .centered-text {
  display: table;
  min-height: 100px;
  /* Removed absolute positioning*/
}
.myClass .myClass-content {
  display: table-cell;
  margin: 0;
  padding: 0 74px 0 18px;
  position: relative;
  vertical-align: middle;
  width: 100%;
}
.myClass .ctaText {
  border-bottom: 0 solid #fff;
  color: #34495E;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .125em;
  margin: 0;
  padding: 0;
  text-decoration: underline;
}
.myClass .postTitle {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}
.myClass .ctaButton {
  background-color: #FFFFFF;
  margin-left: 10px;
  position: absolute;
  right: 0;
  top: 0;
}
.myClass:hover .imgUrl {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.myClass .imgUrl {
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  -moz-transition: -moz-transform 0.4s ease-in-out;
  -o-transition: -o-transform 0.4s ease-in-out;
  -ms-transition: -ms-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

/* Added clearfix class here so that it can work properly*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

<a href="#" class="myClass clearfix"><<!-- moved clearfix here so it can take effect for the necessary area -->>
  <div class="postImageUrl" style="overflow:hidden; z-index: 10; max-width: 100%;">
    <div class="imgUrl" style="background-image:url(http://cdn8.openculture.com/wp-content/uploads/2015/03/17231820/Lorem-Ipsum.jpg);">
    </div>
  </div>
  <div class="centered-text-area">
    <div class="centered-text">
      <div class="myClass-content">
        <div class="ctaText" style="float:left;">
          UpNeXt
        </div>
        <div class="postTitle" style="float:left;">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
          dolore magna aliquam erat volutpat
        </div>
      </div>
    </div>
  </div>
</a>

All I did remove said absolute positioning (it wasn't doing anything that I could tell), moved your clearfix to the proper place, removed your extra div (also a clearfix attempt) and added a clearfix class to the end of your css.

It looks like you've tried to do a lot of things to make this code work. You may want to go through and see what's doing what, a lot of it looks like it's not doing anything at all.

Answer 3

Only add overflow:hidden;

.myClass .myClass-content {
    display: table-cell;
    margin: 0;
    padding: 0 74px 0 18px;
    position: relative;
    vertical-align: middle;
    width: 100%;
    overflow:hidden;
}

If isn't set height:XXpx; the container will fit to the content.