長いテキストを書くときにdivがコンテナに重なってしまいます

Question

私は可能な限り最良の方法で質問を公式化しようとします。

私のウェブサイトのデザインでは、width:90%;のすべてのdiv（ウェブサイトのすべての部分）を取得し、divの両側に5%の余白を付けて、それらを中央にします。私はこれを有効にして、扇形幅とmargin: 0 auto;を設定しています。

私はDjangoのテンプレートに取り組んでいます。私が今書いているページでは、'base.html'に拡張しています。これは、headerとnavigationメニューを含む最初の2つのdivを拡張することを意味します。ページの下部にfooter divもあります。その間に、今追加しているコンテンツがあります。

このセントラルコンテンツのdivでは、私が望む構造は垂直のようなもので、左に浮かぶ20% widthの2つの 'content' divのすぐ隣にすべてのスペースが残っています。ここではイラストです：

CODE：

* { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    #content { 
 
     width: 90%; 
 
     margin: 0 auto; 
 
     background-color: lightyellow; 
 
     height: 80%; 
 
    } 
 
    
 
    .textoh { 
 
     width: 20%; 
 
     height:75%; 
 
     background-color: darkgrey; 
 
     margin: 5px; 
 
     display: inline-block; 
 
     border-radius: 6px; 
 
     padding: 1em; 
 
    } 
 
    
 
    .textoup { 
 
     width: 95%; 
 
     height: 60%; 
 
     background-color: lightgreen; 
 
     margin: 5px; 
 
     border-radius: 6px; 
 
     display: inline-block; 
 
    
 
    } 
 
    
 
    .textodown { 
 
     width: 95%; 
 
     height: 30%; 
 
     background-color: lightpink; 
 
     margin: 5px; 
 
     display: inline-block; 
 
     border-radius: 6px; 
 
    
 
    } 
 
    
 
    .wrap { 
 
     background-color: lightblue; 
 
     position: absolute; 
 
     display: inline-block; 
 
     width: 70%; 
 
     margin: 10px; 
 
     border-radius: 6px; 
 
    }

<div id="content"> 
 
    \t <div class="textoh"> 
 
    \t \t <ul> 
 
    \t \t \t <li>INFO</li> 
 
    \t \t \t <li>ABOUT</li> 
 
    \t \t \t <li>LINKS</li> 
 
    \t \t \t <li>OTHERS</li> 
 
    \t \t </ul> 
 
    \t </div> 
 
    
 
    <div class="wrap"> 
 
    \t <div class="textoup"> 
 
    \t \t <h1>TITLE TITLE TITLE</h1> 
 
    
 
    \t \t <h3>DESCRIPTION DESCRIPTION</h3> 
 
    \t </div> 
 
    
 
    \t <div class="textodown"> 
 
    \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
    \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
    \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
    \t \t \t \t consequat.</p> 
 
    
 
    \t \t \t \t <p>Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
    \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    
 
    \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
    \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
    \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
    \t \t \t \t consequat.</p> 
 
    
 
    \t \t \t \t <p>Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
    \t \t \t \t cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    \t \t \t \t proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    
 
    \t </div> 
 
    </div> 
 
    
 
    </div>

しかし、私はかなりの問題を取得しています。より長い 'lorem'テキストを書くとき、.wrapの.textodown divは、フッタにオーバーラップする#content divの外に出ています。

私は「コンテンツ」divの内側にそれをすべて含んでいたいのですが、と.textodownまたは.wrapが大きく、高さを取得している場合、代わりにそれを上回るの大きな#contentのdivを作ります。

私は英語のスピーカーではないので、問題が明確かどうか分かりません。本当に助けに感謝し、理解していなければ、何か必要なものを投稿して嬉しいです。

Answer 1

私はいくつかの高さを取り除き、幅を調整したコードの下に試してみてください

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#content { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    background-color: lightyellow; 
 
    height: 80%; 
 
} 
 
.textoh { 
 
    width: 20%; 
 
    height: 75%; 
 
    background-color: darkgrey; 
 
    margin: 5%; 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    border-radius: 6px; 
 
    padding: 1em; 
 
} 
 
.textoup { 
 
    width: 60%; 
 
    height: 60%; 
 
    background-color: lightgreen; 
 
    margin: 5%; 
 
    border-radius: 6px; 
 
    display: inline-block; 
 
} 
 
.textodown { 
 
    width: 95%; 
 
    height: 30%; 
 
    background-color: lightpink; 
 
    margin: 5px; 
 
    display: inline-block; 
 
    border-radius: 6px; 
 
} 
 
.wrap { 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
    width: 60%; 
 
    margin: 10px; 
 
    border-radius: 6px; 
 
} 
 
.footer { 
 
    background: red 
 
}

<div id="content"> 
 
    <div class="textoh"> 
 
    <ul> 
 
     <li>INFO</li> 
 
     <li>ABOUT</li> 
 
     <li>LINKS</li> 
 
     <li>OTHERS</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="wrap"> 
 
    <div class="textoup"> 
 
     <h1>TITLE TITLE TITLE</h1> 
 

 
     <h3>DESCRIPTION DESCRIPTION</h3> 
 
    </div> 
 

 
    <div class="textodown cf"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
     </p> 
 

 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
     </p> 
 

 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
    </div> 
 
    </div> 
 
    <div class="footer">this is a footer</div> 
 
</div>

Answer 2

（私は少しあなたのmargin Sを固定し、私はあなたがそれを管理することができますね）.wrapからposition:absoluteを削除。

#content { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    background-color: lightyellow; 
 
} 
 
.textoh { 
 
    width: 20%; 
 
    height: 75%; 
 
    background-color: darkgrey; 
 
    margin: 5%; 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    border-radius: 6px; 
 
    padding: 1em; 
 
} 
 
.textoup { 
 
    width: 90%; 
 
    background-color: lightgreen; 
 
    margin: 5%; 
 
    border-radius: 6px; 
 
    display: inline-block; 
 
} 
 
.textodown { 
 
    width: 90%; 
 
    background-color: lightpink; 
 
    margin: 2% 5% 5% 5%; 
 
    display: inline-block; 
 
    border-radius: 6px; 
 
} 
 
.wrap { 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
    width: 60%; 
 
    margin: 10px; 
 
    border-radius: 6px; 
 
} 
 
.footer { 
 
    background: red 
 
}

<div id="content"> 
 
    <div class="textoh"> 
 
    <ul> 
 
     <li>INFO</li> 
 
     <li>ABOUT</li> 
 
     <li>LINKS</li> 
 
     <li>OTHERS</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="wrap"> 
 
    <div class="textoup"> 
 
     <h1>TITLE TITLE TITLE</h1> 
 

 
     <h3>DESCRIPTION DESCRIPTION</h3> 
 
    </div> 
 

 
    <div class="textodown cf"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
     </p> 
 

 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
     </p> 
 

 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
    </div> 
 
    </div> 
 
    <div class="footer">this is a footer</div> 
 
</div>