CODEWITHSUNDEEP
htmlcsscss-float
Jürgen Paul
Jürgen Paul

Reputation: 15007

Adjust height to floated element

<div class="view">
  <img src="http://media-cache-ec2.pinterest.com/550x/cf/4f/36/cf4f36b3f25df6f6af27ca54012dedf1.jpg">
  <div class="details">
    Lorem....</div>
</div>

html, body {
  height: 100%;
}
.view {
  width: 500px;
}
img, .details {
  width: 50%;
}
img {
  float: left;
}
.details {
  padding: 10px;
  box-sizing: border-box;  
  overflow: hidden;
  background: pink;
  height: 100%;
}

Is there a way to make .details adjust to the height of img? Right now height: 100% does not seem to do the trick.

http://codepen.io/anon/pen/GbfJE

Upvotes: 0

Views: 90

Answers (2)

dezman
dezman

Reputation: 19358

You would have to use javascript (most easily jQuery), which would be quite easy... Check out this solution: http://codepen.io/anon/pen/sKtIb Notice I have included the jQuery Javascript library

Upvotes: 0

Marcin Doliwa
Marcin Doliwa

Reputation: 3659

Simple workaround:

.view {
    background:pink;
    overflow:hidden;
}

Upvotes: 6

Related Questions