div struggles
- Started
- Last post
- 7 Responses
- CygnusZero4
Setting up an html email and having some div issues. Other divs in the email are working fine once sent through outlook, but I have the code below, and that blue box should be a certain width, but once sent through outlook its actually spanning the entire width of the column its in.
It looks fine in jsfiddle but not once sent through outlook. There must be a way to hold the width of that div together so it doesnt stretch 100% across the entire html email.
- SteveZissou0
First thing I'd try is adding "display:inline-block;" to the blue box...it is Outlook though, so good luck!
- monospaced0
- thanks for sharing champ. i think ill continue in this new thread! =XCygnusZero4
- CygnusZero4-1
^ Tried it, doesnt do anything. Basically Im just trying to make a read more button without having to make it as an image, since this is for a template that will be used by many people, and would like that to be html text and easy to change.
- prophetone0
try this?
<div style="width:100%; height:47px; position: relative;"><a href="#"><div style="width:50%; height:47px; background-color:#009fda; margin: auto; position: relative; left:0; right:0; top:0; bottom:0;">read more</div>
- CygnusZero4-1
^ same problem, with of the blue button is stretching to 100% wide.
- CygnusZero40
@Cosmodrome, that worked in outlook! thanks for sharing that
- spoke too soon, this actually doesnt work rightCygnusZero4
- actually it did, small oversight but its working.CygnusZero4
- Cool. Glad it worked out. Here's one for background images if you need: http://backgrounds.c…Cosmodrome
- vaxorcist0
If you need an HTML email to look "the same in ANY email program" you may have to code it like its 1999.... tables, simple fonts, etc... ugh, but less time consuming than testing and debugging in every single email program you can find.... good luck!
Note that different versions of ms outlook use different HTML rendering engines, and newer versions can actually be worse at some things.