如何使用 CSS 将内容保留在自己的列中？

Question

我试图弄清楚为什么当侧边栏中的内容比内容列的高度更大时，我的侧边栏内容（右列）会环绕到内容列（左列）中。

链接到我的页面 http://www.foothillertech.com/student/webdesign/2015/4th/04_50/tinker/divLayout/index.php

链接到我的 CSS http://www.foothillertech.com/student/webdesign/2015/4th/04_50/tinker/divLayout/divLayout.css http://www.foothillertech.com/student/webdesign/2015/4th/04_50/tinker/layout/reset.css

我不是 CSS 专家，我了解基础知识，但不了解每个属性的详细信息以及与其他属性的交互方式。我使用一些为 HTML5 编写的不同教程构建了这个布局，但我使用的是标准标签。

非常感谢任何帮助。

原始 HTML

    <div id="container">

   <!-- header -->  
   <div id="header">
      <h1 id="title">Responsive Layout</h1>
   </div>


   <!-- Navigation -->  
   <div id="menu" class="clearfix">
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </div> 

   <!-- Main Content area -->
   <div id="content">
      <h2>Built with CSS3 and HTML5</h2>
      <!-- Main content -->  
      <p>Responsive design has become a must for a website these days. More than 50%+ of the people who have access to internet use some kind of mobile device, such as tablets, phones etc. And if your website is does not respond correctly to their device size, then it’s most likely a lost customer for you.
  Responsive design has become a must for a website these days. More than 50%+ of the people who have access to internet use some kind of mobile device, such as tablets, phones etc. And if your website is does not respond correctly to their device size, then it’s most likely a lost customer for you.Responsive design has become a must for a website these days. More than 50%+ of the people who have access to internet use some kind of mobile device, such as tablets, phones etc. And if your website is does not respond correctly to their device size, then it’s most likely a lost customer for you.</p>   </div>

   <!-- Sidebar -->
   <div  id="sidebar">
      <h3>This is the Sidebar</h3>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Home</a></li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>  
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li> 
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>    
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>   
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>       
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>      
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
      <!-- Sidebar content -->     
   </div>

   <!-- Footer -->
   <div id="footer" class="clearfix">
      Footer
   </div>

</div>

原始 CSS

@charset "UTF-8";
/* CSS Document */

.clearfix {
    display: block;
    clear: both;
}


#container{
   margin: 0 auto;
   max-width: 1200px;
}
#header {
   width: 94%;
   padding: 3%;
   background-color: #FF5722;
}

#header #title {
   font-size: 50px;
   color: #fff;
}

#menu {
   width: 97%;
   background-color: #E64A19;
   padding: 0 1.5% 0 1.5%;
}

#menu ul li {
   display: inline-block;
   padding: 15px 1.5% 15px 1.5% ;
}

#menu ul li a {
   text-decoration: none;
   color: #ffffff;
   font-size: 1.2em;
}

#menu ul li a:hover {
   color: #000000;
   text-decoration: none;
}

#content {
   float: left;
   padding: 3%;
   width: 64%;
}
#aside {
   float: right;
   padding: 3%;
   width: 24%;
   background-color: #eee;
}
#footer{
   width: 94%;
   padding: 3%;
   background-color: #FF5722;
   border-top: 5px solid #E64A19;
   color: #fff;
   text-align: center;
}

@media all and (max-width : 768px) {

   #header {
      text-align: center;
   }

   #menu {
      text-align: center;
   }

   #content {
      width: 94%;
      padding: 3%;   
   }

   #sidebar {
      width: 94%;
      padding: 3%;
      border-top: 3px solid #E64A19;
   }

}
@media all and (max-width : 330px) {

   #menu ul li {
      display:block;
      width: 94%;
   }

}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333;
    font-family: "Roboto Slab", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}
body {
    font-size:14px;
    line-height: 28px;
    color: #333;
    word-wrap:break-word !important;
    font-family: 'Open Sans', sans-serif;
}

p {
    margin: 0 0 24px;
    margin: 0 0 2.4rem;
    padding: 0;
}

Answer 1

据我所知，它非常简单。在侧边栏使用浮动，它会保持这样而不会中断

div#sidebar{ float: right;}

Answer 2

如果您要使布局具有响应性，您可能需要考虑将内容和侧边栏显示为内联块，而不是使用浮动。它可以更好地跨浏览器运行，您不必清除 div。试试这个：

#content{
    display:inline-block;
    padding:3%;
    width:64%;
}

#sidebar{
    display:inline-block;
    vertical-align:top;
}