Help - Search - Members - Calendar
Full Version: HTML/ CSS div question
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
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.
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.