Непослушный float

Почему красный блок падает вниз, под зелёный? x_x

HTML:

1. <div id="center_column"><div id="capture"><h1>Блог</h1></div>
2. <div id="content">
3.  
4.     <div class="blog">
5.         <h2>assssssssssssssssss</h2>
6.         <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
7.     </div>
8.    
9.     <div id="right_column">
10.         <p><b>Самые просматриваемые</b></p><p>Здесь будут самые просматриваемые новости</p><br />
11.         <p><b>Самые обсуждаемые</b></p><p>Здесь будут самые обсуждаемые новости</p><br />
12.     </div>
13.    
14.     <div style="clear: both;"></div>
15.    
16. </div>
17. </div>

[css].blog {
margin-right: 250px;
border: 1px solid green;
}

#right_column {
float: right;
width: 200px;
border: 1px solid red;
}

#center_column {
border: 5px solid orange;
}[/css]

 

Второй раз наступаю на одни и те же грабли.



Надо было поменять местами .blog и #right_column, чтобы float-элемент шёл первым.
Прошу извинить за флуд.