Как выровнять текст и изображения на одной строке и поместить их влево и/или вправо?

Question

Я следующий CSS и HTML код:

div.container { height: 40px; } 
div.container .title {} 
div.container .link_buttons {} 


<div> 
    <div class="container"> 
    <div class="title"> 
     <img width="16" height="16" src="/favicon.ico" alt="Text"> 

     <a href="http://www.test.com">Test website</a> 
    </div> 

    <div class="link_buttons"> 
     <a target="_blank" href="http://www.test.com"> 
     <img src="transparent.gif" class="background_image" alt="Text"> 
     </a> 
    </div> 
    </div> 

    <!-- The same structure as the above but with different data. --> 
    <div class="container">...</div> 
    <div class="container">...</div> 
</div> 

Я хотел бы, чтобы выровнять по одной и той же линии, все содержимое в каждой div.container и внутри каждого div.container сделать div.title содержание, чтобы быть расположены на левой и содержимое div.link_buttons должно быть расположено справа. Сделано это, я хотел бы по вертикалиdiv.title и div.link_buttons в среднийdiv.container.

Как я могу правильно подобрать CSS? Или я должен переосмыслить и изменить весь HTML-код, чтобы упростить ситуацию? Если да, то что я могу сделать, чтобы иметь тот же результат?

---

Примечание: Я пытался использовать поплавок, но я в беде в основном потому, что я не могу вертикального выравнивания div.title и div.link_buttons внутри div.container (как вы можете увидеть в приведенном выше коде, он имеет height: 40px;).

Answer 1

Здесь вы идете:

div.container { height: 40px; line-height:40px;} 
div.container .title {float:left;} 
div.container .link_buttons {float:right} 

http://jsfiddle.net/WH4eK/

Answer 2

.title { float: left } /* Float them */ 
.link_buttons { float: right } 
.container:after { /* And clear the float */ 
    content: ''; 
    display: table; 
    clear: both; 
}