Gracias por responder juangemelo01
por las capturas se ve que se abren nuevas posibilidades, en caso de ausencia de soporte podemos tirar de display:table; para salir del paso agregando apenas alguna instrucción CSS a mayores
http://caniuse.com/#feat=css-table
Es algo pronto "display:flex;" pero ciertas estructuras facilitan una solución clásica y simple
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<style>
main,section{
display:table; //IE8-9-[10] y OPERA MOBILE para mostrar las columnas en altas resoluciones
display:flex; //para mostrar las columnas en altas resoluciones
}
/*los anchos de los hijos se pueden aplicar mediante width siendo aceptado en flex*/
main>*,section>*{display:table-cell\0;} /* IE8-9 */ creo que no es necesario pero lo pongo por si acaso
</style>
</head>
<body>
<header></header>
<nav></nav>
<main>
<section>
<article></article>
<article></article>
<article></article>
</section>
<aside></aside>
</main>
<footer></footer>
</body>
</html> Colores de resaltado del layout
Código HTML:
body>* { /** PRUEBAS VISUALES **/
background: white;
box-shadow: 0 0 1px 0 silver;
flex: 1 100%;
padding: 1em 0;
}
display: inherit; //HEREDA del padre BODY, ¿mala practica en este caso?
Es css anidado del procesador LESS, al compilarse deja de estar anidado para ser compactible
Código HTML:
nav {
display: inherit;
justify-content: space-around;
a {
color: #333;
text-decoration: none;
}
}
Por lo general CSS permite configurar un conjunto ¿lo leíste en algún lado?
Código HTML:
header, nav, aside { flex: 1 auto; }