内側のdivは他のdivを押していない、クリアできません：両方;

<div>に問題があります。内部<div>（コンテンツdiv）は外部<div>（wrap_content）をプッシュしません。内側のdivは他のdivを押していない、クリアできません：両方;

何が間違っているのかを確認できるようにコードを投稿してください。

のstyle.css

* { 
    padding: 0px; 
    margin: 0px; 
} 

body { 
background: #e2e2e2; 
color: #f2f2f2; 
font-family: Arial; 
} 

#wrap_design { 
width: 1139px; 
} 

#wrap_content { 
float: right; 
max-width: 963px; 
height: 100%; 
border-right: 8px solid #2d2828; 
border-left: 8px solid #2d2828; 
border-bottom: 8px solid #2d2828; 
padding-bottom: 10px; 

} 

#header { 
height: 236px; 
width: 963px; 
background-color: #2d2828; 
} 
#headerimg{ 
z-index: 1; 
margin-left: -26px; 
} 

#loggedin_box { 
min-height: 230px; 
width: 160px; 
background: #2d2828; 
float: left; 
margin-top: 236px; 
position: static; 
padding-bottom: 5px; 
} 

#loggedin_box_green { 
height: 30px: 
width: 150px; 
background: #73aa09; 
padding-top: 5px; 
padding-bottom: 5px; 
padding-left: 5px; 
padding-right: 5px; 
margin-left: 10px; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-right: 10px; 
letter-spacing: 2px; 
} 

#loggedin_box ul { 
border: none; 
} 

#loggedin_box ul li { 
list-style: none; 
text-align: left; 
} 

#loggedin_box ul li a { 
font-family: Arial; 
font-size: 14px; 
color: #b1b2b2; 
text-decoration: none; 
padding-left: 5px; 
} 


#menu_container { 
margin: 0px 0px 0px 0px; 
background: #2d2828; 
font-family: Arial; 
    width: 100%; 
    margin: 0px auto; 
    height: 65px; 
} 

#content { 
color: black; 
vertical-align: top; 
height: 100%; 
margin-bottom: 10px; 
clear: both; 
} 

#content-sidebar { 
border-left: 2px solid #2d2828; 
float: right; 
width: 285px; 
max-width: 285px; 
height: 100%; 
}

のindex.php

<html> 
<head> 
<link rel="shortcut icon" href="images/nfgico.ico" /> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" href="/style/style.css" type="text/css" /> 
</head> 
<body> 
<CENTER> 
<div id="wrap_design"> 
<div id="loggedin_box"> 
<?php 
    if($_SESSION['username'] == "") { 
?> 
    <div id="loggedin_box_green">Log ind</div> 
    <div style="text-align: left; padding-left: 10px;"> 
     <form action="login_check.php" method="post"> 
      <input type="text" value="Brugernavn" name="username" style="width: 140px;" onclick="this.value=''"><br /><br /> 
      <input type="password" value="password" name="password" style="width: 140px;" onclick="this.value=''"><br /><br /> 
      <font style="font-family: Arial; font-size: 12px;">Husk mig:</font><input style="margin-left:15px;" type="checkbox" name="rememberme" class="checkbox" value="1" /><br /><br /> 
      <input type="submit" value="Log ind"><br /><br /> 
     </form> 
     <ul> 
      <li><a href="#">Glemt kodeord</a></li> 
      <li><a href="/create_user.php">Opret bruger</a></li> 
     </ul> 
    </div> 
<?php 
    } else { 
?> 
    <div id="loggedin_box_green">Network</div> 
     <ul> 
      <li><a href="#">Wall</a></li> 
      <li><a href="#">Profil</a></li> 
      <li><a href="#">Chat</a></li> 
      <li><a href="#">Achievements</a></li> 
      <li><a href="#">Clanside</a></li> 
      <li><a href="#">Søg modstander</a></li> 
      <li><a href="#">Søg spil</a></li> 
      <li><a href="/index.php?logout=yes">Log ud</a></li> 
     </ul> 
<?php 
    } 
?> 
</div> 
<div id="wrap_content"> <!-- This is the one that needs to be pushed --> 
    <div id="header"> 
     <img src="/images/banner.png" id="headerimg"> 
    </div> 

    <div id="menu_container"> 
       <div id="droplinetabs1" class="droplinetabs"> 
        <ul> 
        <li><a href="/"><span>Forside</span></a></li> 
        <li><a href="#"><span>Nyheder</span></a> 
         <ul> 
          <li><a href="#">Seneste</a></li> 
          <li><a href="#">lol</a></li> 
          <li><a href="#">loool</a></li> 
          <li><a href="#">loool</a></li> 
         </ul> 
        </li> 
        <li><a href="#"><span>Artikler</span></a></li> 
        <li><a href="#"><span>Spil</span></a></li> 
        <li><a href="#"><span>Turneringer</span></a></li> 
        <li><a href="#"><span>Clan</span></a></li> 
        <li><a href="#"><span>Streams</span></a></li> 
        <li><a href="#"><span>Webshop</span></a></li> 
        </ul> 
       </div> 

    </div>  
     <!-- Content/brødtekst --> 
    <div id="content"> 
     CONTENT GOES HERE THIS IS WHAT NEED TO PUSH 
    </div> 
</div> 
</CENTER> 

</body> 
</html>

私はあなたがそれを必要としないことを望むので、私は投稿しませんでしたindex.phpからのコードの一部があります:)

私は本当に誰かが私を助けることを願っています！ ps。私はインターネット上でいくつかの調査をして、clear: both;を使うべきだと知ったが、実際にそれを働かせることはできない。

出典

2012-03-04 Jonas Hansen

あなた#wrap_content style（それが問題を引き起こしている）からheight: 100%を削除し、そしてそれはどんなフロート要素の周りにラップを保証するために、folowsとして幅とオーバーフローを追加：

#wrap_content { 
    float: right; 
    max-width: 963px; 
    border-right: 8px solid #2d2828; 
    border-left: 8px solid #2d2828; 
    border-bottom: 8px solid #2d2828; 
    padding-bottom: 10px; 
    width: auto; /* Must use this for overflow to do what you want */ 
    overflow: hidden; /* This, plus width, causes box to stretch around floated elements inside of it */ 
}

ちょっとメモとして、公正がありますそこには不必要なCSSの量が増えています。私はあなたがそれを慎重に通過し、それを変更/削除することをお勧めします。あなたは、CSSの量の半分であなたがしていることをすることができます。

「高さ：100％;」をすべて削除します。どこにいても - それがあなたが思っていることをしないならば。私はあなたのCENTERを削除し、あなたの#wrap_designはこのようなこと作ることをお勧め

出典

2012-03-04 23:36:13

なぜ、 'height：100％;'は彼がそれをすると思わないのか説明できますか？ –

雄弁にはなりませんが、私は試してみます：高さ：自動; divのデフォルトであり、内部に何が入っているかをCONTAINに引き伸ばすことを意味します。高さ：100％は、利用可能なスペースの高さを伸ばすためにATTEMPTを実行します。divの幅（および幅：100％;それはありますが）は100％です。この場合、彼は利用可能な高さを "埋める"のではなく、内部にあるものを含むようにしたいので、高さ：100％;問題があった。 [ここに役立つ記事があります]（http://www.tutwow.com/htmlcss/quick-tip-css-100-height/） –

私は通常この問題もありますが、 DOMツリーに沿ったすべての単一要素*は 'min-height：100％;' CSSプロパティです。ありがとう！ +1 –

：

#wrap_design 
    { 
     margin: 0 auto; 
     width: 1139px; 
    }

これはあなたのラッパーを中心に説明する - 私は強くCENTERに対して助言するだろう。このラッパーの余白の上端（上端と下端から20px）を変更する場合は、この余白を20px auto;にします。

clearを使用する必要はありません。必ずしも。フロート（または複数の山車）のラッパーであなただけ置くことができオーバーフロー：隠された（同じ効果）となし、追加のマークアップが必要とされている：

<style type="text/css"> 
    .container 
    { 
     background: #CCC; 
     border: 1px solid #ddd; 
     overflow: hidden; 
     width: 400px; 
    } 
    .left 
    { 
     float: left; 
    } 
    .right 
    { 
     float: right; 
    } 
</style> 
<div class="container"> 
    <div class="left"> 
     this will float left 
    </div> 
    <div class="right"> 
     this will float left 
    </div> 
</div>

はあなたが持っていなかった場合は、「オーバーフロー：隠された」この中にたとえば、.containerに "#CCC"という背景色が表示されません。

これは、明確な方法をやってと同じである（しかし、再び上記以下のマークアップために良いです）：あなたは子供が欲しいとき

<style type="text/css"> 
    .container 
    { 
     background: #CCC; 
     border: 1px solid #ddd; 
     width: 400px; 
    } 
    .left 
    { 
     float: left; 
    } 
    .right 
    { 
     float: right; 
    } 
    .clear 
    { 
     clear: both; 
    } 
</style> 
<div class="container"> 
    <div class="left"> 
     this will float left 
    </div> 
    <div class="right"> 
     this will float left 
    </div> 
    <div class="clear"></div> 
</div>

クリア方法は、親の外に」（このような場合には良いです

<style type="text/css"> 
    .container 
    { 
     background: #CCC; 
     border: 1px solid #ddd; 
     margin: 50px auto; 
     width: 400px; 
    } 
    .left 
    { 
     float: left; 
     width: 200px; 
    } 
    .right 
    { 
     background-color: #333; 
     color: #FFF; 
     float: right; 
     margin: -10px -40px 0 0; 
     width: 240px; 
    } 
    .full 
    { 
     background: #f5f5f5; 
     clear: both; 
     margin: 20px auto; 
     text-align: center; 
     width: 90%; 
    } 
</style> 
<div class="container"> 
    <div class="left"> 
     this will float left 
    </div> 
    <div class="right"> 
     this will float left 
    </div> 
    <div class="full"> 
     this is full sized 
    </div> 
</div>

：「）：あなたのデザインがあなたもこのような明確な使用することができます異なる可能性がある場合

<style type="text/css"> 
    .container 
    { 
     background: #CCC; 
     border: 1px solid #ddd; 
     margin: 50px auto; 
     width: 400px; 
    } 
    .left 
    { 
     float: left; 
    } 
    .right 
    { 
     background-color: #333; 
     color: #FFF; 
     float: right; 
     margin: -10px -40px 0 0; 
    } 
    .clear 
    { 
     clear: both; 
    } 
</style> 
<div class="container"> 
    <div class="left"> 
     this will float left 
    </div> 
    <div class="right"> 
     this will float left 
    </div> 
    <div class="clear"></div> 
</div>

しかし、再び、私は、そのマークアップをお勧めしません

これらの例に従えば、問題を解決する必要があります:)

出典

2012-03-04 23:57:02

皆さん、ありがとうございます、今は完璧に動作しています！ :) –

内側のdivは他のdivを押していない、クリアできません：両方;

答えて

関連する問題