![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
cssのfloatを使い横並びを実現していますがoverflowを利用して横並びを実現するという方法を聞きました。
現状の構成は具体的に以下のような感じです。
<div id="main">
<div id="left">レフト</div>
<div id="center">センター</div>
</div>
#main:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
#left {float: left;}
#center { float: right}
これをoverflowで実現するにはどうすればいいのでしょうか?
また、floatを使用しないで実現するメリットはなんでしょうか?
No.2ベストアンサー
- 回答日時:
floatを指定した要素の親要素に使うoverflowはいわゆるclearfixの代わり(ここで言:after擬似要素の内容)であってfloatの代用ではありません。
使う場合はこんな感じになります。
#main {
overflow:hidden;
}
#left {float: left;}
#center { float: right}
そしてclearfixというテクニックもclearプロパティの代用です。
clearfixを利用しないでoverflowで実現するメリットをあえて上げるなら一つのプロパティだけでそこそこの範囲のブラウザに対応できることです。
ですがoverflowだけですと一部のブラウザで表示が致命的になるためあまり利用されていないと思います。
むしろclearfixと併用されるシーンの方が多いです。
>ORUKA1951さん
positionよりfloatを使う機会が多いのはIEでスクロールが重くなる状態を避けるためというのと、文字の大きさによって可変するメニューのレイアウトに都合が良いこと、あと位置を個別に指定する必要もないので使いやすいというのが理由にあるのではないでしょうか。
お返事ありがとうございます。
となるとブラウザへの配慮を考えてもやはり現状のままでいくのが無難なようですね。
実現するには多数の方法があるのでどれがいいのか迷うとハマってしまいますね^^;
No.1
- 回答日時:
このCSS、最近「はやり」のようですが、出所はどこなんだろう??
position:relatve;とposition:absolute;で実現できるものを、なぜ目的が違うfloatを使うのだろうね。
floatの長所は、訪問者のウィンドウが狭い場合は、折り返されるという長所があります。・・扱いにくい横スクロールを避けることができます。
overflowは、その折り返しをさせないために、block要素を、inline要素に変更して、親blockの幅に関わらず強制的に横並びさせるものです。
長所短所は、これから類推できるでしょう。
いずれにしても、HTMLは何の目的で作られたものであるかを知らない人の考案でしょうね。
HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
この回答への補足
お返事ありがとうございます。
つまり以下のような感じで実行すればいいのでしょうか?
<div id="main">
<div id="left">レフト</div>
<div id="center">センター</div>
</div>
#main {
overflow:hidden;
position:relatve;
width:900px;
}
#left {
overflow:hidden;
position:absolute;
top:0;
left:0;
width:200px;
}
#center {
overflow:hidden;
position:absolute;
top:0;
left:220;
width:680px;
}
さらに共通のCSSを一括で指定してやれば回り込み解除も不要ですしシンプルになりますね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
角丸画像の背景色を透明にした...
-
含む含まないという概念自体の...
-
HTMLの〈li〉について教えてく...
-
NからZへの全単射を具体的に構...
-
VBA でIE 操作 ボタンをクリッ...
-
aの中にspan
-
tdに対してmin-heightの定義、...
-
smallにtext-allignが効かない
-
ヘッダのメニューバーを画面の...
-
CSSのセレクタに指定するbodyと...
-
入力したHTMLがちゃんと表示さ...
-
cssのfloatについて
-
H1タグを画像にしたい
-
input type="hidden"で取得した...
-
CSSに詳しい方、修正方法のアド...
-
双方向リストのソート方法につ...
-
spanでグループ化して二段組
-
テキストボックスの中にリンク...
-
改行ほどは行かないけど、若干...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
質問1.
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
マージソートの計算量について-...
-
親要素・子要素
-
border: noneでボタンの境界線...
-
C言語 並び替え(配列)について
-
tdに対してmin-heightの定義、...
-
HTMLでTextareaを横に2つ並べ...
-
テキストボックスの中にリンク...
-
CSSで改行後の行間調整
-
H1タグを画像にしたい
-
ある要素の中身を全部グレーア...
おすすめ情報