[SOLUCIONADO] Problema con box-flex

jonh_doe · #1 (**permalink**) 05/08/2013, 11:44

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>

pzin · #2 (**permalink**) 05/08/2013, 15:44

Me parece que estás usando la versión de Flexbox que luego se quitó del borrador y se cambió.

jonh_doe · #3 (**permalink**) 06/08/2013, 12:45

Cita:

Iniciado por pzin

Me parece que estás usando la versión de Flexbox que luego se quitó del borrador y se cambió.

Muchas gracias por responder tan rápido, pero no te entiendo bien, podrias explicarme a qué te refieres. He debuggeado un poco con chrome y con firefox y no me sale ningun warning o error en las lineas de css a las que me refiero. Te refieres a que es una propiedad que ya no se usa?
Gracias otra vez.
Un saludo.

pzin · #4 (**permalink**) 06/08/2013, 12:58

Si, porque en principio iba a ser box-flex y al final se quedó en flex.

Para que un elemento ocupe 2/3 y el otro 1/3, te bastaría con algo así:

Código CSS:

Ver original#elcontenedor {
  display: flex;
}
 
.un_tercio {
  flex: 1;
}
 
.dos_tercios {
  flex: 2;
}

Habría que añadir los prefijos propietarios para que funcionen en la mayoría de navegadores (-webkit, --moz, etc).

Se quedaría como (sólo lo hice para WebKit):

jonh_doe · #5 (**permalink**) 06/08/2013, 13:52

Cita:

Iniciado por pzin

Si, porque en principio iba a ser box-flex y al final se quedó en flex.

Para que un elemento ocupe 2/3 y el otro 1/3, te bastaría con algo así:

Código CSS:

Ver original#elcontenedor {
  display: flex;
}
 
.un_tercio {
  flex: 1;
}
 
.dos_tercios {
  flex: 2;
}

Habría que añadir los prefijos propietarios para que funcionen en la mayoría de navegadores (-webkit, --moz, etc).

Se quedaría como (sólo lo hice para WebKit):

Muchisimas gracias por tu rapida respuesta, ha funcionado a la primera.
Un saludo.
David.