Hola, tengo un problema con box-flex.
Estoy haciendo una pagina en la que tengo una caja para el contenido y una lateral con un pequeño menu. Quiero que el contenido ocupe 2/3 del espacio y la barra lateral 1/3. La caja que las contiene a ambas tiene una anchura de 960px, por lo que el contenido deberia ocupar 640px y el menu de la derecha 320px, pero no es así, sino que el tamaño de estas cajas varía en función del contenido... o eso es la impresión que a mí me da....
Os pongo el código.... Muchas gracias de antemano.
Un saludo.
David.
Esta es la plantilla CSS...
Código HTML:
@CHARSET "UTF-8";
html, body {
padding: 0;
margin: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
body {
display: -webkit-box;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-pack: center;
}
#wrapper {
width: 960px;
display: box;
display: -webkit-box;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-box-orient: vertical;
}
header {
background: #999;
padding: 20px;
}
nav {
background: #878787;
color: #fff;
}
nav ul li {
display: inline-block;
font: bold 10px Arial;
padding: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
color: blue;
text-decoration: underline;
}
.container {
width: 960px;
display: box;
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
}
#mainContainer {
-webkit-box-flex: 2.0;
-moz-box-flex: 2.0;
box-flex: 2.0;
background: #white;
padding: 20px;
font: 15px Arial;
}
#rightContainer {
-webkit-box-flex: 1.0;
-moz-box-flex: 1.0;
box-flex: 2.0;
background: orange;
padding: 20px;
}
#rightContainer dd {
font: 15px Arial;
}
#rightContainer dt {
font: bold 15px Arial;
}
#rightContainer h1 {
font: bold 18px Arial;
}
#theFooter {
text-align: center;
padding: 20px 0;
background: black;
color: white;
}
Y la estructura de las páginas... solo cambia el contenido de mainContainer y de rightContainer....
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/responsive_style.css" />
</head>
<body>
<div id="wrapper">
<header>
</header>
<nav>
</nav>
<div class="container">
<section id="mainContainer">
<article>
</article>
<article>
</article>
</section>
<aside id="rightContainer">
</aside>
</div>
<footer id="theFooter">
</footer>
</div>
</body>
</html>