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!!