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

    CSS Howto..

    How can I set a “bounding” area for my drag-able object in javascript?

    Tab menu in CSS - how to set an active tab

    How to create a 'p' tag using css [closed]

    How to control the area of background so it only makes a limited area has color other area don't?

    how decrease font size?

    How to find the css file name associated with an element?

    How to use the compass transition mixins with a translateX property and autoprefixer?

    How to change header size in css

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    How to not display css padding when span element is empty

    Position relative, how to get rid of dead space?

    How to stack multiple divs on top of each other and each have a height of 100%

    How to make a scrollable div inside of a div with a specific height

    How prevent Conflict between two $(this) in jquery?

    How to deal with collapsing margins on html & body?

    how to fix the css padding in this situation?

    How to adjust the length of input

    How to have a backgroud image 100% width / height inside a
  • ?
  • How do I center a set of JQuery Mobile radio buttons in the viewport?

    How to properly wait for browser reflow/repaint to finish

    how can i prevent to take input onkeypress anything other than alphanumeric

    how does CSS determine which way to animate a transition?

    Can someone help me figure out how to put normal links into this Jquery Menu?

    How can I stop mobile Safari from pausing before beginning a transition

    How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?

    How does -ms-view-state differ from standard CSS Media Queries Expressions?

    How to add spacing between checkboxlist items?

    In CSS, how can I make a div as high as the entire page?

    How to modify this JQuery CSS into my view?

    How to create a header.php and footer.php with CSS files?