Fluid layout on iPhone


Maybe someone can help. I have a really simple layout which is fluid. Works fine in iPhone until I wrap some of the text in any inline tag such as span for styling purposes.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
body {background-color:#e4e4e4;margin:0;padding:0;width:100%} 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td bgcolor="#e4e4e4">
<table width="100%" border="0" cellspacing="0" cellpadding="25">
<td width="100%" bgcolor="#414143" style="color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;text-align:left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <span style="color:#f065a5;">eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>

Have I missed something?

Any help, much appreciated.


jamesashcroft, 5 years ago

Just to add, the issue I am getting is that the table doesn't span 100%, but it looks as if it only spans as far about 90%, with the presence of the span tag around the text. If I remove the span tag then it does span the 100%.

jamesashcroft, 5 years ago

I've answered my own question... I removed margin:0;padding:0;width:100% off of the body. I'll just have to live with it not spanning to the hard edge

roshodgekiss roshodgekiss, 5 years ago

Hi James, thanks for letting us know your fix here. If you're feeling really adventurous, you can try:

<meta name="viewport" content="width=device-width" />
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">

See this article on iPhone development for a bit of context. Problem may be that the body's width:100% isn't agreeing with the iPhone viewport's definition of 100% width. Alternately, pop the margin:0;padding:0; back in and see if that removes the margin somewhat.

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free