Проблема с вложенностью блоков

[Girn]

Вот есть у меня уже сверстаный блок.

Вот его код:

<div id="line1">
<div class="block-line1">
	 <div class="block-header">
	 <h1>About WhiteSquare</h1>
	 <span></span>
	 </div>
	 <div class="block-body">
	 <div class="block-image"><img src="images/img1.png" alt="" /></div>

	 <div class="block-text">
	 <p>In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.</p>
	 </div>
	 <div class="block-more"><a href="#">Read more</a></div>
	 </div>
</div>
<div class="block-line1">
<div class="block-header">
	 <h1>a word from OUR ceo</h1>
	 <span></span>
</div>
<div class="block-body">
	 <div class="block-image"><img src="images/img1.png" alt="" /></div>
	 <div class="block-text">
	 <p>“In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac.”</p>
	 </div>
	 <div class="block-more">Yane Naumoski, CEO</div>
</div>
</div>
</div><!-- end line1-->

и css:

/* <Блок> */
.block-line1,
.block-line2,
.block-line3,
.block-header,
.block-header span,
.block-body,
.block-text {
overflow: hidden;
}
.block-line1 {
float: left;
width: 460px;
margin-left: 10px;
padding-right: 10px;
}
.block-line2{
float: left;
width: 300px;
margin-left: 10px;
padding-right: 10px;
}
.block-line3 {
float: left;
width: 940px;
margin-left: 10px;
padding-right: 10px;
}
.block-header h1 {
float: left;
height: 15px;
font-size: 13px;
font-family: Oswald, Geneva, sans-serif;
text-transform: uppercase;
color: #7e7e7e;
padding: 2px 9px 1px 20px;
background: url(images/title-bg.png) no-repeat;
}
.block-header span {
display: block;
height: 15px;
background: url(images/title-bg2.png) repeat-x;
}
.block-body {
margin-top: 15px;
}
.block-image {
float: left;
width: 136px;
height: 137px;
padding: 1px;
margin-right: 19px;
border: 1px solid #cccccc;
}
.block-text {
height: 125px;
padding-top: 4px;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
color: #8f8f8f;
line-height: 1.3;
}
.block-more {
font-size: 13px;
font-family: Tahoma, Geneva, sans-serif;
color: #525252;
}
.block-more a {
font-size: 13px;
font-family: Tahoma, Geneva, sans-serif;
color: #525252;
}
.block-text p {
margin: 0;
}
/* </Блок> */

Вроде бы все нормально, но вот мне понадобилось сделать отступ ниже этого блока, делаю так:

#line1 {
margin-bottom: 15px;
}

Но ничего не происходит. Разбираю в чем пролбема, делаю так:

#line1 {
margin-bottom: 15px;
border: 1px solid black;
}

И вижу что рамки вокруг моего блока нет, она только сверху (потому и не работает правильно отступ):

Соответственно вопрос: как сделать чтобы Блок line1 захвативал содержимое нормально?

Edited June 14, 2013 by Girn

[Girn]

Решил проблему добавив в конце блока line1:

<div style="clear: both;"></div>

Работает, но правильно ли это? и можно ли сделать по другому?

[Vulner]

Вполне правильно. Еще можно просто прописать overflow: hidden; в стиле блока с id="line1".