Duda estructuración con responsive design

mitobo · #1 (**permalink**) 05/12/2012, 09:47

hola a todos.
Estoy planteandome hacer un diseño adaptativo a mi página, pero no sé si la idea que tengo en la cabeza es viable (lo he intentado y no he sido capaz).
La idea es que tengo un ASIDE a la IZQUIERDA de un 20% y a su DERECHA un ARTICLE de un 80%. El código queda así:

Código HTML:

<!doctype html>
<html>
<head></head>
<style type="text/css">
	
	body{
		background-color:#273343;
	}
	aside{
		float:left;
		width:20%;
		background-color:#FFFF99;
	}
	article{
		float:left;
		background-color:#C80517;
		width:80%;
	}

</style>
<body>
<aside>Aquí el lado izquierdo</aside>
<article>
	Artículo principal.
</article>
</body>
</html>

Lo que me gustaría es que, cuando la página se vea en un dispositivo móvil, el aside pase DEBAJO del article. He probado cambiandole los floats de left a right, 100% de ancho pero nada.
Supongo que el html del aside debería estar DESPUES del article, no?

Se os ocurre alguna forma de conseguirlo?
Desde ya, muchas gracias.

#2 (**permalink**) 05/12/2012, 16:13

Si es posible, yo lo hago en mi web de biologia y bioquimica. Pero si deberias poner el aside despues en el html y usar float right y left para colocarlos, con el ancho que mencionas 20 y 80. Para que en el movil se vea debajo tienes que usar media queries para modificar esos valores por width:100% y float: none.