Reputation: 1609
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
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