Sidebar (float: Left) Not Always Floating Left

I currently made a container to contain sidebars and content, but when I add more text to the sidebar than to the container the second sidebar floats a bit to the side. These are t

Solution 1:

You're using two sidebars with the same class. put a .clear {clear:both} in your css file and use an jsut before the sidebar closing div. If you really need two sidebars, you have to create another rule for it. sidebar1, sidebar2 with different floats. Change the inline-block to block.

Solution 2:

If I understand the question: HTML

<divclass="container"><divclass="sidebar">
            Placeholder
            <br><hr><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div><divclass="content">Placeholder</div><br><divclass="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto eligendi maxime autem debitis eum consectetur odit at exercitationem velit earum sunt nobis laborum. Dignissimos vero accusantium velit rerum voluptatibus?</div></div>

CSS

.sidebar {
width: 222px;
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px1px0px#FDFDFD;
box-shadow: 0px1px0px#949494;
margin-right: 20px;
padding: 5px;
float: left;
text-align: left;
font-weight: bold;
display: inline-block;
margin-top: 10px;
}
.content {
width: 666px;
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px1px0px#FDFDFD;
box-shadow: 0px1px0px#949494;
padding: 5px;
float: right;
text-align: left;
display: inline-block;
margin: auto;
margin-top: 10px;
}
.container {
width: 932px;
text-align: center;
margin: auto;
}

DEMO

Solution 3:

Update the class .sidebar

.sidebar {
    background-color: #E9E9E9;
    border: 1px solid #7F7F7F;
    border-radius: 5px;
    box-shadow: 01px0#949494;
    font-weight: bold;
    height: auto;
    margin-right: 20px;
    margin-top: 10px;
    overflow: hidden;
    padding: 5px;
    text-align: left;
    width: 222px;
}