Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Ohio
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Image currently on left, want to float on right

    I am working on a email signature for Outlook that will become our company standard. It will be auto generated by a program I will write but I'm having trouble doing what I want. I first created the signature in Microsoft Word but it was a jumbled mess, 8Kb large and unreadable. I then rewrote it by hand to do the exact same thing (down to 1Kb). Problem is I want the image to float just to the right of my text block, not to the left. Every combination of float and align I've tried puts the image right justified all the way and not right next to the text block. Here is my current code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML><HEAD><TITLE>Test HTML</TITLE>
    <META content="text/html; charset=windows-1252" http-equiv=Content-Type>
    <style type="text/css">
    a:visited
    	{color:#FF3333;
    	}
    a:link	{color:#0000FF;
    	}
    font.name 
    	{font-family:arial,Verdana,sans-serif;
    	font-size:110%;
    	color:black;
    	font-weight:bold;
    	}
    font.info 
    	{font-family:arial,Verdana,sans-serif;
    	font-size:80%;
    	color:black;
    	font-weight:normal;
    	}
    image.logo 
    	{ margin:6px;
    	float:left;
    	text-aligh:center;
    	width:260px;
    	height:60px;
    	}
    </style>
    </HEAD>
    <BODY lang=EN-US link=blue vLink=purple>
    <DIV><A href="http://www.google.com/"><IMG class="logo" src="http://support.whgardiner.com/temp/SampleImage.jpg" alt="Hello" border=0></a></DIV>
    <DIV><FONT class="name">Name of Person</FONT><BR>
    <FONT class="info">
    Address City State Zip<BR>
    Phone 000-000-0000 &nbsp;&nbsp; Fax 000-000-0000<BR>
    <A href="mailto:Email@none.com">Email@nonenone.com</A>&nbsp; &nbsp; <A href="http://www.google.com/">www.google.com</A><BR>
    </FONT>
    </DIV>
    </BODY></HTML>
    And here is what it looks like:
    Image currently on left, want to float on right-leftjustifiedimage.jpg

    However here is what I WANT it to look like:
    Image currently on left, want to float on right-rightjustifiedimage.jpg

    Can anyone help me get this positioned like that? I cannot figure it out. In essence I want a two column table (which is how I'd do it in the past) but I want to do it per css standards if possible.

    -Allan
    Last edited by vseven; 01-16-2012 at 07:48 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hi vseven,

    Try this instead:

    Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head><title>Test HTML</title>
    <meta content="text/html; charset=windows-1252" http-equiv=Content-Type>
    <style type="text/css">
    a:visited
    	{color:#FF3333;
    	}
    a:link	{color:#0000FF;
    	}
    .name 
    	{font-family:arial,Verdana,sans-serif;
    	font-size:110%;
    	color:black;
    	font-weight:bold;
    	}
    .info 
    	{font-family:arial,Verdana,sans-serif;
    	font-size:80%;
    	color:black;
    	font-weight:normal;
    	}
    #logo 
    	{ margin:6px;
    	float:right;
    	text-aligh:center;
    	
    	}
    #wrapper {
    	width: 960px;
    	overflow: auto;	
    }
    
    p {
    	padding: 0;
    	margin: 0;	
    }
    </style>
    </head>
    <body lang=EN-US link=blue vLink=purple>
    <div id="wrapper">
      <div id="logo"><A href="http://www.google.com/"><img class="logo" src="http://support.whgardiner.com/temp/SampleImage.jpg" alt="Hello" border=0></a></div>
      <div id="main"><p class="name">Name of Person</p>
        <p class="info">
        Address City State Zip</p>
        <p>Phone 000-000-0000</p>
        <p>Fax 000-000-0000</p>
        <a href="mailto:Email@none.com">Email@nonenone.com</a><p><a href="http://www.google.com/">www.google.com</a></p>
        </p>
      </div>
    </div>
    </body>
    </html>
    I cleaned up the code somewhat, added a containg element to clear the floats, and removed those font and break tags and replaced them with <p> tags.
    Last edited by teedoff; 01-16-2012 at 08:07 PM.
    Teed

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello vseven,
    I tried not to change too much of your original ... didn't test it in an email though so no idea if it works -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <HEAD>
    <TITLE>Test HTML</TITLE>
    <META content="text/html; charset=windows-1252" http-equiv=Content-Type>
    <style type="text/css">
    #wrap { width: 600px; }
    a.logo {
    	margin: 6px;
    	float: right;
    	text-align: center;
    	width: 260px;
    	height: 60px;
    }
    font.name {
    	font-family: arial, Verdana, sans-serif;
    	font-size: 110%;
    	color: black;
    	font-weight: bold;
    }
    font.info {
    	font-family: arial, Verdana, sans-serif;
    	font-size: 80%;
    	color: black;
    	font-weight: normal;
    }
    a:visited { color:#FF3333; }
    a:link { color:#0000FF; }
    </style>
    </HEAD>
    <BODY lang=EN-US link=blue vLink=purple>
        <div id="wrap">
        	<A href="http://www.google.com/" class="logo"><IMG src="http://support.whgardiner.com/temp/SampleImage.jpg" alt="Hello" border=0></a>
            <FONT class="name">Name of Person</FONT><BR>
            <FONT class="info"> 
                Address City State Zip<BR>
                Phone 000-000-0000 &nbsp;&nbsp; Fax 000-000-0000<BR>
                <A href="mailto:Email@none.com">Email@nonenone.com</A>&nbsp; &nbsp; 
                <A href="http://www.google.com/">www.google.com</A><BR>
            </FONT> 
        <!--end wrap--></div>
    </BODY>
    </HTML>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Ohio
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    teedoff & Excavator - Thanks. Both kinda work better then my example but both still aren't "floating" like I imagine.

    The problem is having to set a width (of 960 or 600 or anything). It floats on the right and I want it to butt right against the text. BUT I don't want the text to wrap except on my line breaks nor do I know ahead of time how "wide" there signature is (since the email address can vary a lot).

    Is there a way to truly "float" the image to the right of the text so it stays there like in a two column table?

    Example:
    Code:
    ------------------------------
    |  Name          |           |
    |  Address       |   LOGO    |      Dead space
    |  Email         |           |
    ------------------------------
    So that if the email line is 14 characters the logo would be against the right edge and if it were 35 characters the image is still at the right edge.
    Last edited by vseven; 01-16-2012 at 08:33 PM.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    If this is an emailer, I'm thinking divs wont work as most mail programs dont render them correctly. Tables would be needed.
    Teed

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Ohio
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    We are using Outlook and this signature will only be used when they are creating a HTML based email. The div's so far work fine...they just aren't doing what I want. But if tables are the only way to go then that's what I'll use...I was hoping to do this the "right" way though.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    No this will work. One thing you can do is instead of floating your logo right, float the text left. The code I posted above, I gave that div tag an id of main. SO you could give #main a width and float: left;

    Then you'd need to move your div with the logo and all below the main div, since floats come first in the markup.

    Here is the revised code I posted above.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head><title>Test HTML</title>
    <meta content="text/html; charset=windows-1252" http-equiv=Content-Type>
    <style type="text/css">
    a:visited
    	{color:#FF3333;
    	}
    a:link	{color:#0000FF;
    	}
    .name 
    	{font-family:arial,Verdana,sans-serif;
    	font-size:110%;
    	color:black;
    	font-weight:bold;
    	}
    .info 
    	{font-family:arial,Verdana,sans-serif;
    	font-size:80%;
    	color:black;
    	font-weight:normal;
    	}
    #logo 
    	{ margin:6px;
    	/*float:right;*/
    	text-aligh:center;
    	
    	}
    #wrapper {
    	width: 960px;
    	overflow: auto;	
    }
    
    p {
    	padding: 0;
    	margin: 0;	
    }
    #main {width:200px; float: left;}
    </style>
    </head>
    <body lang=EN-US link=blue vLink=purple>
    <div id="wrapper">
      
      <div id="main"><p class="name">Name of Person</p>
        <p class="info">
        Address City State Zip</p>
        <p>Phone 000-000-0000</p>
        <p>Fax 000-000-0000</p>
        <a href="mailto:Email@none.com">Email@nonenone.com</a><p><a href="http://www.google.com/">www.google.com</a></p>
        </p>
      </div>
      <div id="logo"><A href="http://www.google.com/"><img class="logo" src="http://support.whgardiner.com/temp/SampleImage.jpg" alt="Hello" border=0></a></div>
    </div>
    </body>
    </html>
    Teed

  • Users who have thanked teedoff for this post:

    vseven (01-16-2012)

  • #8
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Ohio
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thats just about it Teedoff, just had to remove the "width" tag on the main since I don't want a set width and clean up a couple little things. I added a bit to the logo class so I can do margins and adjust it up and down. Here is what I have modified that I'll start testing with the actual signatures.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head><title>Test HTML</title>
    <meta content="text/html; charset=windows-1252" http-equiv=Content-Type>
    <style type="text/css">
    a:visited 
    	{color:#FF3333;
    	}
    a:link	
    	{color:#0000FF;
    	}
    .name 	
    	{font-family:arial,Verdana,sans-serif;
    	font-size:110%;
    	color:black;
    	font-weight:bold;
    	}
    .info 
    	{font-family:arial,Verdana,sans-serif;
    	font-size:80%;
    	color:black;
    	font-weight:normal;
    	}
    #wrapper 
    	{overflow: visible;
    	}
    #textholder	
    	{float:left;
    	padding: 2px;
    	margin: 0px;
    	}
    #logoholder
    	{align:left;
    	}
    #logo
    	{margin:0px 0px 0px 0px;
    	padding: 10px;
    	}
    p 
    	{padding: 0px;
    	margin: 0px;
    	}
    
    </style>
    </head>
    <body lang=EN-US>
    <div id="wrapper">
        <div id="textholder">
        	<p class="name">Name of Person</p>
        	<p class="info">Address City State Zip</p>
        	<p class="info">Phone 000-000-0000 &nbsp; Fax 000-000-0000</p>
        	<p class="info"><a href="mailto:Email@none.com">Email@nonenone.com</a>  &nbsp; <a href="http://www.google.com/">www.google.com</a></p>
        </div>
        <div id="logoholder">
    	<A href="http://www.google.com/"><img id="logo" src="http://support.whgardiner.com/temp/SampleImage.jpg" alt="Hello" border=0></a>
        </div>
    </div>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •