スマホ画面で長い文章が、左端に短い幅で片寄る。

　示されたCSSやHTMLのソースでは原因はわかりませんが、内容の大きさはpadding辺の内側です。 　巾が縮まりすぎるブロックに、固定巾のパディングやマージンが設定されているため内容巾が狭くなる(widthのデフォルトはauto)のではないかと。 　たとえば、親コンテナブロックが、width:100%となっていて、その内側の<p></p>にマージンが固定で指定(たとえばmargin-left:200px)されていると、親ブロックの巾が200pxになると、<p></p>の巾はゼロになってしまいます。 しかし、 ＞PCではいろんなブラウザで問題なく表示されています。 　もし予測が正しければ、ＰＣでもウィンドウ巾を狭くすると同じ症状になるはずです。 　スマートフォンやi-padで表示させるためには基本的に固定巾で作成することはありません。リキッドスタイルにした上で、最小幅を指定することが多いでしょう。 header,container,footerが書かれているCSSからだけの判断ですが、画面は上段一枠,中段二枠,下段一枠の一般的な配置だと想定してお答えします。(違っていたら、下記を参考にしてください。) ★floatによる段組について( http://okwave.jp/qa/q7079628.html#a3 ) ★HTML5での段組( http://okwave.jp/qa/q7169929.html ) ★DIVの崩れを防ぐには( http://okwave.jp/qa/q7069085.html ) なども参考にしてください。 ★★HTMLをどのように書かれているか情報がないため、「DIVの崩れを防ぐには( http://okwave.jp/qa/q7069085.html )」のHTML(二段組)で示してあります。 　i-phone,i-pad対応にするには、CSS部分を下記のものに変えて試すほうが良いでしょう。また、段組は印刷時には適用されません。 　なお、＿はタブに戻してください。 ＿<style type="text/css"> <!-- div.section p{ ＿text-indent:1em; ＿margin:0 1em; ＿line-height:1.6em; } --> ＿</style> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.header,div.article,div.footer{ ＿width:80%;margin:0 auto;/* センター配置IE5,非対応 */ ＿min-width:640px; ＿max-width:900px; ＿border:solid 1px rgb(255,200,200);background-color:rgb(255,200,200); } div.article{ ＿position:relative; ＿background-color:lime;border-color:lime; } div.article div.section img{ ＿float:left; ＿margin: 5px; ＿border:1px solid gray; ＿background-color:white; } div.article div.section{ ＿margin-left:32%;margin-bottom:200px;/* 見本のため */ ＿clear:left;/* clearがこのブロック内で使える */ } div.article div.contentTable{ ＿position:absolute; ＿top:0;left:0;width:30%;height:100%; ＿background-color:aqua;border-color:aqua; } div.footer{background-color:yellow;border-color:yellow;} --> ＿</style>