How can I use CSS to keep content in its own column?

Tags: html,css

Problem :

I'm trying to figure out why my sidebar content (right column) wraps around into the content column (left column) when the content in the sidebar it a greater height than the content column.

Link to my Page http://www.foothillertech.com/student/webdesign/2015/4th/04_50/tinker/divLayout/index.php

Link to my 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

I am not a css expert, I understand the basics, but not the finer details of every property and how the interact with others. I built this layout using a few different tutorials that were written for HTML5, but I'm using standard tags.

Any assistance is greatly appreciated.

Original 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>

Original 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;
}

---

Solution :

Its very simple as far I understand. use float right to the sidebar and it will stay like that without breaking

div#sidebar{ float: right;}