我遇到了我的边栏问题

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：（从#main-content除去float:left）

#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