Matt
Matt

Reputation: 1609

Set height of container class to height of image

I'm trying to get the container class .external-link to be the height of the image, and no higher or lower.

<p class="external-link"><img src="http://www.vernmccraylaw.com/files/stacks_image_1241.jpg" alt="img_58c1b29bb1309"><strong>Related Articles</strong>Some text’n’stuff for yo clickage.</p>


.external-link {
  background-color: #ddd;
  height: 200px;
  border: 1px solid $grey;
  font-family: 'Open Sans';
}

.external-link img {
  float: left;
  width: 200px;
  padding-right: 20px;
}

.external-link strong {
  display: block;
  font-family: 'Open Sans Condensed';
}

I know the solution should be simple, I'm just drawing a blank.

JSFIDDLE: LINK

Upvotes: 0

Views: 43

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

Remove the height from .external-link and add overflow: auto to clear the float on the img.

.external-link {
  background-color: #ddd;
  border: 1px solid $grey;
  font-family: 'Open Sans';
  overflow: auto;
}

.external-link img {
  float: left;
  width: 200px;
  padding-right: 20px;
}

.external-link strong {
  display: block;
  font-family: 'Open Sans Condensed';
}
<p class="external-link"><img src="http://www.vernmccraylaw.com/files/stacks_image_1241.jpg" alt="img_58c1b29bb1309"><strong>Related Articles</strong>Some text’n’stuff for yo clickage.</p>

Upvotes: 1

Related Questions