I want this layout where I have a rectangular box. And inside the box on the left there is a text and on the right there is an image. This looks fine in the browser, but when sent out as an html email, in outlook the float right doesn't seem to work. It puts the image in the next line under the text. Any ideas on how to make this work? (I am trying to avoid using tables.)
<div style="width: 100%;border-style:solid;overflow: hidden;">
<span style="float: left;">
<h3> Your appointment Details</h3>
</span>
<span style="float: right;">
<img src="someImage"/>
</span>
</div>
Very late to the conversation, but here is how to "float" in html email using align="" instead.
Example here
Also, if you are looking for resources on html email (I assume you are as the answer you marked correct is very general), here is a huge list of resources.
This is a really good guide from Mail Chimp on Coding for HTML Emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
Some basic tips:
Use tables for layout.
Set your widest table to be maximum of 600px wide.
Don't try and use JavaScript or Flash
Don't use CSS in a style tag as some mail clients will discard it.
Use inline CSS styles only.
Basically code your emails as if it was roughly 2003.
CampaignMonitor provide this rather brilliant guide to all CSS support across multiple email clients, which is also available as a pdf or xls download.
As the answers above say, email support for CSS is very limited, mostly due to Microsoft's descision to use Word as its html rendering engine.
Simple floating images can be like
<img src="yourimage" align="left" />
BUT that way you won't get solid results with padding between text and image, outlook removes margin and padding and your text will stick right next to the image. So try this:
<div style="text-align:justify;">
...a lot of text here untill you want to insert an image that floats left...
<table cellpadding="0" cellspacing="0" align="left" style="float: left;">
<tr>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
<td width="15"> </td>
</tr>
</table>
...a lot more text here until you need an image that floats right...
<table cellpadding="0" cellspacing="0" align="right" style="float: right;">
<tr>
<td width="15"> </td>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
</tr>
</table>
... a lot more text here...
</div>
You need to wrap a 'table' element around it to get the padding-margin effect to work in Gmail, Outlook (online), Microsoft Outlook (desktop client),...
Give the table an align=left or right attribute. (Edit answer here: in addition and fallback for other email clients also give the table a float value so do both. They are back-ups to each other. Some clients understand "float", others understand "align", some understand both,...) Your table will float in the text almost like an image does. The only difference is that in outlook a table generates an automatic line break in the text where an image with align left or right does not generate breaks.
For setting the margin, since we are now working with a table, add an extra "td" with a width="15" to the left or right of your image cell and a non-breaking-space in it. (or a transparant gif -> spacer.gif)
You better not leave cells empty because otherwise the width of your cell will not be respected in certain email clients
For top and bottom margin we can use the 'vspace' attribute, don't forget to give the image an align = left or right attribute. Otherwise the 'vspace' will not work.
I've found a way to apply float on Outlook.com.
Just capitalize the tag like Float:left.
<span style="Float:left;">Content to float</span>
Maybe you should use !important too;
I tested it and it worked.
check out https://www.campaignmonitor.com/css/ here it has listed what are all the things supported and not supported in email
Instead of float you can use an outer table and put contents you want to float left in left td of outer table.
this is not an elegant answer but I did it this way
When you are floating something to the right of something the right floating element should allways apear first in code. Like this:
<div style="width: 100%;border-style:solid;overflow: hidden;">
<img src="someImage" style="float: right;"/>
<h3> Your appointment Details</h3>
</div>
Related
i tried below code.
code1:
<table><tr>
<td><table>table1</table></td>
<td><table>table2</table></td>
</table>
It works fine, But after certain height introduces page break, which i want to avoid.So im trying below code,
Code2:
<div style="width:650px">
<table align="right" style="width:500px;">table1</table>
<table align="left" style="width:125px;">table2</table>
</div>
This is not working in outlook mail, Please can anybody suggest me How to make 2nd code work in outlook? or How to overcome pagebreak problem in first code?
Depending on your content and space, you can use floats or inline display:
<div style="width:650px">
<table style="display:inline-block;">table1</table>
<table style="float: left;">table2</table>
</div>
Demo
Being a customer service staff with limited access to basic html, I've been assigned a task that beyond my skill about making a decent page of highlight items, after series of search around, I somehow get things working, well, in firefox, when I load up the the same content in Chrome & IE, I found different problem and to my best effort, I have no idea what cause the problem...
You might first wish to look at the firefox version as it display perfectly as I wanted it to:http://jsfiddle.net/kitchellw/TR6v5
(and I don't know why the first line doesn't apply the CSS...)
In IE, the round corner gone, which I won't worry too much... but
padding is gone...
the lower table looks like a mess
I found a way to tackle the image border, just border=0
In chrome,
while the upper section looks ok, the content in lower table seems 'shifted' to right by a few pixels and no longer stay center
Here is the exact code for the problem table at the lower section:
<table class=highlightitem>
<tr>
<td height="200" valign="top" >
<center>
<a href="http://www.digitalbuydirect.com/index.php?route=product/category&keyword=DSC-TX30" target="blank">
<img width=234 src="http://www.digitalbuydirect.com/edm/eDM20130516/TX30.png" /></a>
</center>
</td>
</tr>
<tr>
<td height="200" valign="top" >
<font class=product><B>some text</b></font><br><br>
<font class=content>some text</font><br>
<br>
<font class=pricehighlight><B>price</font><BR>
<font class=content><s>other price</s></font>
</td>
</tr>
<tr>
<td align="right" height="50" valign="bottom" >
<img src="http://www.digitalbuydirect.com/edm/achieve/shopnow_35.png" /> </td>
</tr>
</table>
and finally, I know my code is complex by using multi-table to control the vertical position, and CSS is my friend here, but i were unable to get the 'shop now' icon station at the lower right corner with clickable url attach with it, I found a CSS background image with a display block for the url might work, but the display block still request at least 1 character, which I cannot afford on my image. Any hint or direction would be appreciated.
First of all, you should really clean up your deprecated code.
So far the things I've seen that are deprecated or not supported anymore are as follows:
<center> - Use CSS text-align:center; reference
<font> - Use another element like <p> coupled with CSS text styling
<td align="right"> - Use CSS float:right; reference
<td valign="top"> - Use CSS vertical-align:top; reference
As for your IE padding problem, take a look at this question. I'm not sure if that's applicable though, since you didn't include your CSS in the question, so I don't know how you implemented the padding you already have.
As for centering, using margin:0 auto; will work for statically positioned elements. For absolutely or fixed position elements I do this: #elementID{width:800px[specify width]; left:-400px[negative half of the width]; margin-left:50%;}
I have a problem with formatting a CSS table using the Gumby framework. The first row of the table "grabs" content above it.
I suspect I have some unclosed tag, but I sure cannot find it.
Here is what I think is the releveant css:
<div class="six columns" center-text>
<div id='Tips' >
<h4>Tips for Tops</h4>
OMITTING TWO PARAGRAPHS OF TEXT
<br><br>
</div>
<div class="twelve columns center-text"><br><h2>Top Ten Individual Winners at All Clubs This Year<br> See All Club Results</h2><br>
</div>
<div id="response">
<div class="CSS_Table_Example" style="width:100%">
<table style="margin: auto;">
<tr>
<td>
etc.
The first row of the table put a border around the sides of the containing the "Top Ten..."
You can see the issue on a draft page at:
http://billhogsett.com/Whist/ajax.php?scores/index
The right hand column contains a table 50% of the time so you may need to reload a few times to see the issue.
I hope this is enough information to allow someone to solve my dilemma.
Remove background from the div or set a width so it won't go out. And set border: none for the CSS_Table_Example class to get rid off the border around.
Hope this is answers your question.
btw. don't use <br> to put some space, use margin property instead.
I am coding a newsletter in a table format that ought to be compatible with (mostly) every e-mail client, but Outlook 2007 adds 1px spaces to every image that's in one row with text-elements.
I set border-collapse: collapse, cellpadding="0" and cellspacing="0" on the table and style="font-size:1px; line-height:0;" on the TDs but it doesn't work. IMGs are display:block. Also setting valign="bottom" on the top element and valign="top" on the bottom one didn't work.
Here is my fiddle: http://jsfiddle.net/ycpNK/9/ - The red and the green boxes are the ones affected by the spacing. You can reproduce this bug in Outlook 2007.
Does someone know how to get rid of the spaces?
If I recall correctly, setting display:block on the image corrects this behaviour. So try:
<img src="myimage.jpg" width="100" height="20" style="display:block;" />
Another thing to try is to remove all unnecessary whitespace from the cells that you're getting the problems.
By 'remove unnecessary whitespace' I mean if you have this:
<td> *here there may be several spaces and a return character*
<img src="foo.gif" />
</td>
Replace it with this:
<td><img src="foo.gif" /></td> *no unnecessary spaces or returns*
It's hard to diagnose the problem without seeing your html but this has fixed some of my layout errors.
I am using asp.net and C#.
I have a image and three line. Which I want to place like this
Like the one you can see in this below URL .
http://www.campaignmonitor.com/gallery/
Image is on the left side and parallel to image we can write text.
I know that the same can be acheived by HTML table / ASP.NET table like this
<table>
<tr>
<td>
<img src="#"/>
</td>
<td>
first line <br />
second line <br/>
third line <br />
</td>
</tr>
</table>
but my problem is that I can't use table, so please let me know how can i acheive the above task without using tables.
Might be <span> or <div> tag can do the trick. but I am really dumb in html. and I can't ever search the exact answer to my problem on google..
Using CSS, you can float the image to the left, which will cause the text to appear to the image's right.
For example, take the following:
<html>
<head><title>Example</title></head>
<body>
<div style="float:left"> <!-- I've floated the div containing the image to the left -->
<img src="http://www.google.com/images/srpr/nav_logo13.png">
</div>
This is text that is to the right of the image.
</body>
</html>