Div doesn't stay at the right place

Question

I'm currently having trouble with http://jsfiddle.net/XB2r7/6/, or:

.content {
margin-right: auto;
margin-left: auto;
background-color:rgba(64,64,64,0.9);
width: 1000px;
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px solid #333;
color: #fff;
overflow: auto;
margin-bottom: 20px;
box-shadow: 0px 1px 1px #333;
}
.clear {
clear: both;
}
.sidebar {
width: 23.5%;
height: auto;
display: block;
float: left;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);
}
.content2 {
width: 73.5%;
height: auto;
display: block;
float: right;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);

}
.h1 {
font-weight: bold;
}
.content hr {
border: 0;
height: 2px;
background: url('bg3.jpg');
}

As you can see at JSFiddle the sidebar is going down as I place a second content2-div. Is there a way to fix this without placing it both in other containers?

Answer 1

try this in your css file :

    .content {
margin-right: auto;
margin-left: auto;
background-color:rgba(64,64,64,0.9);
width: 1000px;
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: 1px solid #333;
color: #fff;
overflow: auto;
margin-bottom: 20px;
box-shadow: 0px 1px 1px #333;
}
.clear {
clear: both;
}
.sidebar {
width: 23.5%;
height: auto;
display: block;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);
}
.content2 {
width: 73.5%;
height: auto;
display: block;
float: right;
color: #000;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background-color: rgba(255,255,255,0.9);

}
.h1 {
font-weight: bold;
}
.content hr {
border: 0;
height: 2px;
background: url('bg3.jpg');
}

it works :

Answer 2

Change the order of your HTML elements:

http://jsfiddle.net/XB2r7/6/

<div class="content"></div>
<div class="sidebar"></div>

<div class="content"></div>
<div class="sidebar"></div>

Answer 3

try this

<div class="content">
  <div class="sidebar">
<h1>Consectetur adipiscing elit.</h1>
<hr>
Morbi vel porttitor augue, eu rhoncus massa. Vivamus venenatis, arcu at euismod semper, ipsum nunc interdum ante, in semper mauris metus eu risus. Aliquam nibh massa, venenatis in turpis vitae, tempor lacinia metus. Vestibulum sed metus ut lectus lacinia tincidunt ac eu erat. Phasellus eu fermentum lacus. Duis vitae bibendum magna, a ullamcorper libero. In hac habitasse platea dictumst. Phasellus molestie nisl id lectus blandit, ac rhoncus dui pellentesque. Praesent sit amet tempus turpis, eu elementum mauris. Sed ipsum dui, luctus eu vehicula id, eleifend nec libero. Donec.
  <h1>Consectetur adipiscing elit.</h1>
<hr>
Morbi vel porttitor augue, eu rhoncus massa. Vivamus venenatis, arcu at euismod semper, ipsum nunc interdum ante, in semper mauris metus eu risus. Aliquam nibh massa, venenatis in turpis vitae, tempor lacinia metus. Vestibulum sed metus ut lectus lacinia tincidunt ac eu erat. Phasellus eu fermentum lacus. Duis vitae bibendum magna, a ullamcorper libero. In hac habitasse platea dictumst. Phasellus molestie nisl id lectus blandit, ac rhoncus dui pellentesque. Praesent sit amet tempus turpis, eu elementum mauris. Sed ipsum dui, luctus eu vehicula id, eleifend nec libero. Donec.
</div>

      <div class="content2">
<h1>Duis ac felis neque. Ut leo massa, hendrerit et nulla at.</h1>
<hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquet leo at eros convallis rhoncus. Sed malesuada tincidunt dolor, nec ornare sem tincidunt vel. Maecenas placerat ipsum eu quam semper, eu tincidunt felis fringilla. Ut placerat vehicula vulputate. Sed id ultricies odio, eu congue nisi. Vivamus venenatis mauris id urna ullamcorper, ut posuere ipsum sodales. Proin gravida varius urna eu eleifend. Praesent a interdum sapien. Cras scelerisque nisi sit amet nibh convallis bibendum a eu diam. Nam porttitor elementum fringilla. Etiam accumsan dictum metus vitae cursus.
<br><br>
Vivamus ante mi, tincidunt quis commodo tempor, consequat vel nisl. Phasellus vestibulum elit a dui laoreet, nec congue velit vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam condimentum orci sit amet orci imperdiet gravida. Proin porta luctus quam, quis bibendum urna lobortis porttitor. Pellentesque nec lobortis ipsum. Pellentesque sit amet felis quis risus luctus semper in id ante. Nullam condimentum neque eget sollicitudin interdum. Duis imperdiet enim felis, in facilisis nisl facilisis at. Aliquam ut enim vehicula ligula dignissim molestie. Quisque dignissim quis ante ut eleifend. Suspendisse vitae mi vitae ligula interdum egestas ut sed nibh.
<br><br>
Mauris sit amet egestas augue. Aliquam ultrices tristique dolor vel luctus. Vestibulum cursus eleifend magna nec varius. Sed cursus magna in mi feugiat eleifend id quis purus. Fusce sollicitudin ultricies augue ac viverra. Curabitur tempor feugiat justo eu porta. Suspendisse eu sollicitudin ipsum. Proin rutrum turpis id massa molestie sollicitudin. Maecenas sit amet justo cursus, blandit mi sit amet, scelerisque quam. Nam ut arcu fringilla, sodales nibh sed, sodales elit. Nam vel tortor sed erat interdum sollicitudin sed non libero. Donec tristique, justo id interdum fermentum, lacus augue dictum nisl, sit amet adipiscing est enim vitae neque.
</div>

<div class="content2">
<h1>Duis ac felis neque. Ut leo massa, hendrerit et nulla at.</h1>
<hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquet leo at eros convallis rhoncus. Sed malesuada tincidunt dolor, nec ornare sem tincidunt vel. Maecenas placerat ipsum eu quam semper, eu tincidunt felis fringilla. Ut placerat vehicula vulputate. Sed id ultricies odio, eu congue nisi. Vivamus venenatis mauris id urna ullamcorper, ut posuere ipsum sodales. Proin gravida varius urna eu eleifend. Praesent a interdum sapien. Cras scelerisque nisi sit amet nibh convallis bibendum a eu diam. Nam porttitor elementum fringilla. Etiam accumsan dictum metus vitae cursus.
<br><br>
Vivamus ante mi, tincidunt quis commodo tempor, consequat vel nisl. Phasellus vestibulum elit a dui laoreet, nec congue velit vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam condimentum orci sit amet orci imperdiet gravida. Proin porta luctus quam, quis bibendum urna lobortis porttitor. Pellentesque nec lobortis ipsum. Pellentesque sit amet felis quis risus luctus semper in id ante. Nullam condimentum neque eget sollicitudin interdum. Duis imperdiet enim felis, in facilisis nisl facilisis at. Aliquam ut enim vehicula ligula dignissim molestie. Quisque dignissim quis ante ut eleifend. Suspendisse vitae mi vitae ligula interdum egestas ut sed nibh.
<br><br>
Mauris sit amet egestas augue. Aliquam ultrices tristique dolor vel luctus. Vestibulum cursus eleifend magna nec varius. Sed cursus magna in mi feugiat eleifend id quis purus. Fusce sollicitudin ultricies augue ac viverra. Curabitur tempor feugiat justo eu porta. Suspendisse eu sollicitudin ipsum. Proin rutrum turpis id massa molestie sollicitudin. Maecenas sit amet justo cursus, blandit mi sit amet, scelerisque quam. Nam ut arcu fringilla, sodales nibh sed, sodales elit. Nam vel tortor sed erat interdum sollicitudin sed non libero. Donec tristique, justo id interdum fermentum, lacus augue dictum nisl, sit amet adipiscing est enim vitae neque.
</div>
</div>

Answer 4

Remove float:left from .sidebar class

.sidebar {
    float:left; /*remove*/
}

Demo

Answer 5

I've updated your fiddle.

Just removed .sidebar {float:left}