Posicionamento de DIVs com textos e imagens

[MarceloJS 0]

Bom dia galera.

Sou novo em Web, comecei com html5 e css3 mas ja estou desenvolvendo algumas coisas por pura prática.

Estou com um certo problema. Meu projeto esta travado numa situação incomoda pois minha ideia é posicionar duas DIVs uma ao lado da outra e cada uma delas conterá uma imagem do lado esquerdo e um título ao lado direito mas até agora consegui posicioná-las porem o conteúdo de cada uma delas não fica legal sai tudo de posição. Já vi vários tópicos como usar tabela, list mas sempre indicam que não é forma correta de se fazer que no caso isso seria 'gambiarra' pelo menos é o que vi nos tópicos. Gostaria de uma indicação, conselho, o que é melhor fazer??

Obs: Usei float em uma delas para esquerda e a outra deixei sem float, mas o conteúdo dentro de cada uma se desalinhou. Usei float nas duas mas se desalinhou tudo também.

 

[victorqueiroz 34]

Tente Assim:

<style>
.box{
float:left;
margin-right:10px;
width:300px;
}
.box .imagem { 
float:left;
}
</style>






<div class="box">
<img src="http://lorempixel.com/400/200/food/1/" width="200px" height="200px" class="imagem" />
    <div class="caption">
     Descrição
    </div>
</div>


<div class="box">
<img src="http://lorempixel.com/400/200/food/1/" width="200px" height="200px" class="imagem" />
    <div class="caption">
     Descrição
    </div>
</div>