使左浮动元素环绕右浮动元素

Question

I have an unordered list and the list items float left in a div. Inside that div there's a sidebar that floats right.

in this image you can see the the text within the list items wrap once they reach the sidebar. However, the list item itself does not, so you still see the white background behind the sidebar.

How can I make it so the list item wraps as well?

 #container { background: #f8f8f8; border: 1px solid #d1d1d1; display: block; margin-left: auto; margin-right: auto; max-width: 1200px; overflow: hidden; padding: 10px; position: relative; } #sidebar { background: none; float: right; margin: 0 10px 0; padding: 10px; width: 300px; transition: 500ms right; border: 1px solid grey; min-height: 300px; } .submissions-container ul { list-style-type: none; } .submissions-container ul li { margin: 0px 0px 10px 0px; background-color: #fff; border: 1px solid #f4f4f4; border-left-color: rgb(244, 244, 244); border-left-style: solid; border-left-width: 1px; border-left: 4px solid #e6e6e6; box-shadow: 0px 1px 2px rgba(0,0,0,0.03); border-radius: 2px; padding: 10px; } 

 <div id="container"> <div id="sidebar"> <div class="sidebar-container"> sidebar </div> </div> <div class="content"> <div class="submissions-container"> <ul> <li> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test </li> </ul> </div> </div> </div> 

Answer 1

Adding overflow: auto; to your ul > li does the trick

 #container { background: #f8f8f8; border: 1px solid #d1d1d1; display: block; margin-left: auto; margin-right: auto; max-width: 1200px; overflow: hidden; padding: 10px; position: relative; } #sidebar { background: none; float: right; margin: 0 10px 0; padding: 10px; width: 300px; transition: 500ms right; border: 1px solid grey; min-height: 300px; } .submissions-container ul { list-style-type: none; } .submissions-container ul li { margin: 0px 0px 10px 0px; background-color: #fff; border: 1px solid #f4f4f4; border-left-color: rgb(244, 244, 244); border-left-style: solid; border-left-width: 1px; border-left: 4px solid #e6e6e6; box-shadow: 0px 1px 2px rgba(0,0,0,0.03); border-radius: 2px; padding: 10px; overflow: auto; } 

 <div id="container"> <div id="sidebar"> <div class="sidebar-container"> sidebar </div> </div> <div class="content"> <div class="submissions-container"> <ul> <li> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li> <li> test test test </li> <li> test test test </li> <li> test test test </li> </ul> </div> </div> </div>