IE：floatでレイアウトが崩れる理由がaltにも… (I-and-R 【帯広/oma/web/ホームページ制作/デザイン/】)
今日、cssでカラムをfloatさせている際に、驚きの出来事がありました。 IEで親の幅に合わせてピタピタに左右のカラムのwidthを設定すると、レイアウトが崩れる…ってのはよくあることですが、なんと、そんなわけでもないのにレイアウトが崩れたのです。 原因を探しても探しても、どーーーー頑張っても見つからず…。 だって、ピタピタにしたわけじゃないんですもの。余裕がある上に、leftとrightで分けたんですもの。 そこで、最後の手段的なものとして、アテで入れていた<img src="#" alt="*******" />のalt部分を削除してみました。altだけ適当に長いものを入れてたんです。 するとどーーーでしょーーー！ レイアウトが直った…。 ま、まさかこのaltがジャマをしてくださっていたとは…。 こんな作り方をされる方はめったにいないでしょうが、もし、IEでfloatした時にレイ
CSS - Clearing floats
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way. The problem Let's try it. This is the CSS we'll use throughout the page: div.container { border: 1px s
floatは「回り込み」ではない:てんぽ
てんぽ: floatは「回り込み」ではない CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど 「CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ（normal flow）から取り除き、左（または右）に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた（float:left）なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素を
画像の回り込みを行う
つまり、テキストがきれいに回り込んでくれずに画像の右下の方から開始されえしまうというものです。 これを強引にテーブルなんかでデザインしている人もいるでしょうけど、 画像が出るたびに毎回テーブルを使うのは多大な労力が必要ですし、 メンテナンスも大変ですよね。 とはいえ、img要素にもalign属性がありますからそれを使えば便利ですが、 HTML4.01や今後のXHTMLではalign属性は廃止方向へ向かっています。 そこでスタイルシートで画像の回り込みをやってみましょう。 スタイルシートで設定すれば、管理もラクです。試しに以下の写真を使ってみる事にしましょう。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style
floatプロパティのテスト - 3ping.org
Comments:7 MaKOTO 2007年11月15日 01:27 こういう授業を受けている生徒さん達が羨ましいです。 web制作の道へ進む生徒さんは知らず知らずの内に近道を進んでいることに気づいていると思いますが、 ネスケ4の崩壊っぷりを見せて「お前たちは幸せもんだぁ」と武田鉄矢口調で言い放って欲しいです。 ※役所関連の仕事ではネスケ4.xが対象ブラウザに入る可能性がなきにしもあらずですが・・・。 wu 2007年11月15日 12:59 MaKOTOさん、お久しぶりです! 生徒たちは「ふーん」という顔で淡々と勉強しています。(笑 テーブルデザインを知らない人は、逆にすごい素直にHTMLとCSSを覚えられるようです。 「おじさんが勉強した頃は大変だったんだぞ」みたいな時代になるのでしょうか‥ ｶﾞｺﾌﾞﾙ。 sf 2007年11月21日 03:10 答えは？ wu 2007
フロートとマージン辺
floatを使った段組では、各カラムのwidthの合計がコンテナの幅を超えないことが「カラム落ち」しないことの条件だと思われがちですが、 仕様にはそのような規定はありません。重要なのはマージン辺（外辺）です。 floatによる段組は「ボックスの回りこみ」なんていう曖昧な表現では説明できません。 浮動体の振る舞いを支配する厳密な規則を、 2カラムレイアウトにおける連続するふたつの左フロートに適用して考えると、 <div id="container"> <div id="main"> 1番目の左フロート </div> <div id="sub"> 2番目の左フロート </div> </div> 2番目の左フロートの外左辺（左マージン辺）は、1番目の左フロートの外右辺より右側になければならない 2番目の左フロートの外右辺は、コンテナの右辺より右側にあってはならない これらの条件が守られている限り
clearは「floatの解除」ではない:てんぽ
コメント（1件） -:承認待ちコメント このコメントは管理者の承認待ちです 2013年02月20日（水）13:47:58 コメントの投稿 名前 件名 メール URL コメント コメントを編集・削除するにはパスワードの入力が必要です。 編集・削除用パスワード 非公開コメント 管理者にだけ表示を許可する トラックバック（3件） http://mb.blog7.fc2.com/tb.php/62-551cfb2b floatとclearの関係 昨日、「mixi」のコミュニティで見つけたサイト。 clearは「floatの解... 2006年03月27日（月）16:57:24 from ddy-w::blog フロート解除と上マージンは一緒に指定しない！ フロート解除を指定した要素に、上マージンを指定しても、 上マージンが利かない(;´Д`)ノ。 -------------------------
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://mynotes.jp/lecture/html-css/css2-4
http://mynotes.jp/blog/2007/10/the_same_height_columns
フロートとネガティブマージンまとめ:CSS | Tech de Go
http://elastic965.80code.com/blog/2006/12/float2