У меня проблемы с моей боковой панелью

Question

Я изо всех сил пытаюсь заставить свою боковую панель сидеть рядом с моим контентом. В основном мой контент просто не будет сидеть рядом с моей боковой панелью. Он работает, если у меня нет длинных фрагментов текста, но в противном случае он просто переходит к следующей строке. Я был бы признателен за любую помощь.

Вот картина проблемы:

http://coderdojo.co/inverclyde/dojo14/picture/problem.png

Вот мой HTML

<!-- All Content --> 
    <div class="content"> 

     <!-- Main Content --> 
     <div id="main_content"> 
      <h3>Lorem Ipsum</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium odio vitae erat pharetra eleifend. Sed in consectetur odio, vel venenatis nunc. 
       Sed felis sapien, ullamcorper eget arcu eget, consectetur posuere nisl. Ut blandit metus quis lectus ultricies, eu dignissim mauris rhoncus. 
       Aliquam est libero, molestie eget lacus ac, luctus interdum enim. Nulla ac dapibus tellus, in bibendum leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Mauris in mi lorem. Vivamus nec risus nec nisi tempus bibendum ut eget mi. Phasellus eget luctus massa. 
       Vivamus et libero turpis. 
      </p> 

     </div> 

     <!-- Sidebar --> 
     <div id="sidebar"> 
     <!-- Sidebar Search --> 
      <form class = "search" method="get" action=""> 
       <input class = "search_box" type="text" value="Search..." onfocus="if(this.value=='Search...')this.value=''"; onblur="if(this.value=='')this.value='Search...';" > 

       <input class = "search_submit" type = "submit" value = "Search"> 
      </form> 
      <!-- Sidebar Menu --> 
      <ul id="sidebar_menu">   
       <li><a id="" href="#">Link 1</a> 
       <li><a id="" href="#">Link 2</a> 
       <li><a id="" href="#">Link 3</a> 
       <li><a id="" href="#">Link 4</a> 
       <li><a id="" href="#">Link 5</a> 
       <li><a id="" href="#">Link 6</a> 
       <li><a id="" href="#">Link 7</a> 
       <li><a id="" href="#">Link 8</a> 
      </ul>   
     </div> 
    </div> 

Вот мой CSS

#content { 
width: 80%; 
background-color: #C54099; 
margin-top: 140px; 
} 

#main_content { 
float: left; 
margin: 10px; 
margin-right: 310px; 
padding: 5px; 

} 


#sidebar { 
float: right; 
margin: 10px; 
margin-top: 0; 
width: 300px; 
height: 100%; 
background: #585858; 

} 

#sidebar_menu { 
margin: 20px; 
} 

#sidebar_menu li { 
list-style-type: none; 
margin: 10px; 
padding-bottom: 10px; 
border-bottom: 1px dotted #DDD; 


} 

#sidebar_menu li a{ 
text-decoration: none; 
} 

.search { 
margin: 5px auto 5px auto; 
} 

Answer 1

вы должны установить width для того, чтобы приспособить основной контент-влево так же, как сказал франциско.

В противном случае Если вы хотите, чтобы он автоматически настраивался, вы должны добавить боковую панель сначала в html, как это.

HTML:

<div class="content"> 

    <!-- Sidebar --> 
     <div id="sidebar"> 
     <!-- Sidebar Search --> 
      <form class="search" method="get" action=""> 
       <input class="search_box" type="text" value="Search..." onfocus="if(this.value=='Search...')this.value=''" ;="" onblur="if(this.value=='')this.value='Search...';"> 

       <input class="search_submit" type="submit" value="Search"> 
      </form> 
      <!-- Sidebar Menu --> 
      <ul id="sidebar_menu">   
       <li><a id="" href="#">Link 1</a> 
       </li><li><a id="" href="#">Link 2</a> 
       </li><li><a id="" href="#">Link 3</a> 
       </li><li><a id="" href="#">Link 4</a> 
       </li><li><a id="" href="#">Link 5</a> 
       </li><li><a id="" href="#">Link 6</a> 
       </li><li><a id="" href="#">Link 7</a> 
       </li><li><a id="" href="#">Link 8</a> 
      </li></ul>   
     </div><!-- Main Content --> 
     <div id="main_content"> 
      <h3>Lorem Ipsum</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium odio vitae erat pharetra eleifend. Sed in consectetur odio, vel venenatis nunc. 
       Sed felis sapien, ullamcorper eget arcu eget, consectetur posuere nisl. Ut blandit metus quis lectus ultricies, eu dignissim mauris rhoncus. 
       Aliquam est libero, molestie eget lacus ac, luctus interdum enim. Nulla ac dapibus tellus, in bibendum leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Mauris in mi lorem. Vivamus nec risus nec nisi tempus bibendum ut eget mi. Phasellus eget luctus massa. 
       Vivamus et libero turpis. 
      </p> 

     </div> 



    </div> 

CSS: (удалены float:left от #main-content)

#content { 
width: 80%; 
background-color: #C54099; 
margin-top: 140px; 
} 

#main_content { 
margin: 10px;  // removed float left! 
margin-right: 310px; 
padding: 5px; 
} 

#sidebar { 
float: right; 
margin: 10px; 
margin-top: 0; 
width: 300px; 
height: 100%; 
background: #585858; 

} 

#sidebar_menu { 
margin: 20px; 
} 

#sidebar_menu li { 
list-style-type: none; 
margin: 10px; 
padding-bottom: 10px; 
border-bottom: 1px dotted #DDD; 


} 

#sidebar_menu li a{ 
text-decoration: none; 
} 

.search { 
margin: 5px auto 5px auto; 
} 

Answer 2

Вы выставиться ваш #main_content с width: ;. Это игнорируется браузерами ...

Попробуйте изменить CSS:

#main_content { 
    float: left; 
    margin: 10px; 
    margin-right: 310px; 
    padding: 5px; 
    width: 500px; 
} 
#sidebar { 
    float: right; 
    margin: 10px; 
    margin-top: 0; 
    width: 300px; 
    height: 100%; 
    background: #585858; 
} 

JSFIDDLE