HTML/ CSS div question Options

[cphoop281]

This email signature is my first ever HTML project, so please be tame on correcting me on best practices. This in mind, everything has gone well so far, however there is just one issue I can't figure out. I want to use inline CSS because this is for an email signature as I said and I don't want to host files. My issue is that I want the image in the left div to scale to the exact size of the div on the right. I have spent about 4 hours attempting to figure this out, and have decided to consult the experts. I want whatever the right div (profile) is to remain static, but the image in the left div (logo) to scale to match the size of the right div exactly. Any thoughts? If anyone could provided a working example that would help me a lot. Thanks!

CODE

<div class="logo" style="float: left; font-family: Open Sans, sans-serif;">
    <img alt="Arts Council of Greater Baton Rouge Logo" height="130" src="http://i.cubeupload.com/uPMiiQ.png"   /></div>
<div class="profile" style="float: left; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(40, 172, 226); padding-left: 20px; margin-left: 20px; font-family: Open Sans, sans-serif;">
    <h1 style="color: rgb(191, 30, 46); font-size: 20px; margin: 0px; text-transform: uppercase;"><b>JOHN APPLESEED</b></h1>
    <h5 style="font-size: 14px; color: rgb(51, 51, 51); padding-bottom: 6px; padding-top: 2px; font-weight: 500; margin: 0px;">
        Director of Programming</h5>
    <p style="line-height: 20px; font-size: 13px; color: rgb(51, 51, 51);">427 Laurel St, Baton Rouge, LA 70801<br />
    225.555.5555 ext. 555</p>
    <a href="http://www.artsbr.org" style="color: rgb(191, 30, 46); text-decoration: none;">www.artsbr.org</a></div>

- Curtis

[pandy]

By size, do you mean both width and height? If to the image will be distorted.

[cphoop281]

No, just the height of the logo. In other words, the image's height (maintaining its original ratio) should vary based on the height of the right div.

This post has been edited by cphoop281: May 25 2016, 10:15 AM

[Frederiek]

Then try setting the image height to "127". Both DIVs then will be 131px high. And since you don't set a width to the image, its aspect ratio will be maintained.