Estoy haciendo una pequeña página que me gustaría que estuviese adaptada para móviles y a poder ser en html5
 
En mi página aproximadamente esto:
1ª columna: Titulo, Subtitulo, imagen (una debajo de otra)
2ª columna: Descripción
 
La forma que la he hecho es crear un div para todo con un borde verde, luego un div para la parte de la izquierda y otro más para la derecha.
 
Al tener position:relative, escribo todo lo de la 1ª columna y cuando voy a poner lo de la segunda columna lo sitúo mediante margin-left y margin-top negativo.
 
Mis problemas:
1- Si la segunda columna tiene menos contenido que la primera, entonces lo que hace que el borde del div general se me queda por encima del contenido de la primera columna
2- Si la primera columna no tiene foto, al aplicar a la segunda margin-top negativo se me va muy arriba
 
<div id='container'>
    <div id=primera>
           <span title..
           <span subtitle..
           <img ....
    </div>
    <div id=segunda style="margin-left:300px;margin-top:-40px">
             <span description...
     </div>
</div>
 
 
He pensado hacerlo con tabla pero no se si es del todo óptimo para móviles.
 
Gracias anticipadas!! 
  
 

