CodingForums.com - Image currently on left, want to float on right

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Image currently on left, want to float on right (http://www.codingforums.com/showthread.php?t=249021)

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:
Attachment 10720

However here is what I WANT it to look like:
Attachment 10719

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

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.

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>

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.

If this is an emailer, I'm thinking divs wont work as most mail programs dont render them correctly. Tables would be needed.

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.

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>

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>