html - position absolute div broken

Question

I have a div like this:

<div class="main">
    <div class="container_1">A</div>
    <div class="container_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat diam non neque imperdiet cursus ut ut erat. Sed pellentesque congue justo, sed auctor velit posuere ac.></div>    
</div>

And my css is like this:

.main div
{
    float:left;
}

.main .container_2
{
    width:500px;
}

.main .container_1
{
    width:40px;
}

.main
{
    position:absolute;      
    padding:5px;
    color:#fff;
    background-color:#365;
}

The problem I have is, when I don't use position:absolute; on my main div, everything is broken (you can view the example on jsfiddle. Everything works fine only if I use position absolute on the main div, but I don't wanna use position absolute because I want the main div to preseve its space in the document. Any help please?

Thank you

Answer 1

clear親がすべてのコンテンツを確実にラップするように、フローティング要素がある場合は常に使用する必要があります。:afterこれにはCSSを使用するのが好きです

.main:after{
    content: '';
    display: block;
    clear: both;
}

Answer 2

私は絶対的なポジショニングを絶対に避けようとしています。「正しい」方法で表示するためだけに何かを絶対に配置していることに気付いた場合、通常は他の場所で問題を探します。

私にとって、絶対配置は、上部のナビゲーションや下部のフッター、またはそれらの線に沿ったものなど、要素を固定したい場合のために保存されています。

ほとんどがここで言ったように。メイン div をフロートします。いくつかの頭痛を軽減するのに役立つはずです。

ここでいくつかのものを整理し、更新しました：http://jsfiddle.net/s58TF/

.main_2{
padding:5px;
color:#fff;
background-color:#365;
float:left;

}

Answer 3

以下を使用できます。

.main {
  overflow: hidden;
}

- または -

clearfix メソッド (他の理由で「overflow: hidden」を使用したくない場合): http://css-tricks.com/snippets/css/clear-fix/

これは通常、次のように機能します。

.group:after {
  content: "";
  display: table;
  clear: both;
}

クラス「グループ」を「メイン」div に追加するか、「グループ」を「メイン」に置き換えるだけです。適用されて機能している clearfix メソッドは次のとおりです: http://jsfiddle.net/ksyFG/

---

明確にするために、これらは「overflow: hidden」または clearfix の 2 つの別個のソリューションです。

Answer 4

使用する

overflow:auto

それ以外の

position:absolute;

.main で

jsfiddle