携帯サイトでの回り込み

質問

携帯サイトをコーディングしているのですが、auのみ、ボックスの回り込みが出来なく困っています。
「画像の右にテキスト」であれば

CSS
-----------------------------------------------
.float { float:left; }
.img { width:50px; height:35px; }
-----------------------------------------------
HTML
-----------------------------------------------
<!--{* この画像の右に文字列を表示する *}-->
<img class="float img" align="left" src="jpg.jpg" />
floatON
<!--{* 回り込み解除 *}-->
<div clear="all" class="clear"></div>
floatOFF
-----------------------------------------------
で出来たのですが、

「ボックス要素の右にボックス要素」だと
CSS
-----------------------------------------------
.float-box1 {
float:left;
text-align:left;
width:20%;
height:30px;
background:#4682b4;
}

.float-box2 {
float:left;
text-align:left;
width:20%;
height:30px;
background:#3cb371;
}
-----------------------------------------------
HTML
-----------------------------------------------
<div class="float-box-area">
<div class="float-box1" align="left">box1</div>
<div class="float-box2" align="left">box2</div>
</div>
<div clear="all" class="clear"></div>
-----------------------------------------------
で組むと、

box1
box2
という状態になってしまいます。

box1box2
というふうにしたいのですが、どなたかご存知の方いらっしゃいますか？

テーブルでは考えていないのでテーブルでの横並びはなしでお願いします。
softbankとdocomoでは上記で回り込み出来ました。auだけ出来ません。
ブラウザ種は「WAP2.0」になります。

宜しくお願いいたします。

回答No.2

神崎 渉瑠（@taloo）

class属性の指定に対応していないのでは？
style属性で指定してみてください。

<div style="float:left">あああ</div>
<div>あああ</div>

回答No.1

ORUKA1951

携帯サイトということはmediaはhandheldですよね。スマホはscreenです。
＞携帯サイトをコーディングしているのですが、
　それって携帯用にスタイルシート書いているって意味ですか？？
2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )
　の後半部分をよく読むこと。

<div class="float-box-area">
<div class="float-box1" align="left">box1</div>
<div class="float-box2" align="left">box2</div>
</div>
<div clear="all" class="clear"></div>
　こんなHTML書いてはなりません。!!
2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
　とは、HTMLは文書構造、プレゼンテーションはスタイルシートと言う意味です。

　もし、ふたつの要素の内容が大きくなったので縦に並べたいという時に困るでしょ!!

　まず率直に文書構造だけをHTMLを使ってマークアップします。そしたら、Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )などでチェックします。Web開発されているならfirefoxお使いでしょうから、Html Validatorやfirebugでもよい。
　HTML4.01strictが無難でしょう。DOCTYPEもブラウザが標準モードで動作するよう正しく記述します。

　それがすんだら、スタイルシートでデザインしていきます。よほど古い機種でしたら外部スタイルシートを読みないこともありますが、ここ10年のものでしたら多分大丈夫なので
<link rel="styleSheet" type="text/css" media="handheld" href="./styleSheet/handheld.css">
として、そのスタイルシートに携帯電話用のスタイルシートを書きます。
　一方PCやスマホ用は
<link rel="styleSheet" type="text/css" media="screen" href="./styleSheet/screen.css">
のようにして分けておきます。

例えばHTMLが
<div class="header">
　<ol>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ol>
</div>
だったとすると、
div.header div.nav ol{
width:40%;
float:left;
height:30px;
margin:0;padding:0;
position:relative;
}
div.header div.nav ol li{
display:inline-block;
width:48%;
text-indent:-10em;
overflow:hidden;
}
div.header div.nav olの次の要素{
clear:left;
}
とか・・

　いずれにしろ、まずHTMLをきちんと書かないと始まりません。膨大なブラウザ間の誤差を回避する基本は、strictで作成し標準モードで動作するようDOCTYPEを記述して、表現はスタイルシートに任せるという基本を守る必要があります。