Posicionamiento dinámico de columnas y bloques

rutame · #1 (**permalink**) 04/07/2013, 18:48

Buenos días a todos:

Quiero hacer un layout con tres columnas y que la columna de la derecha suba hasta arriba del todo cuando haya espacio libre y cuando el "TITULAR SEA de 3 COLUMNAS" que baje, tal que así:

El bloque amarillo puede coger 2 o 3 columnas (todo el espacio). Todos flotan, menos "pagina" que está "normal".

El código html y CSS:

Código HTML:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Prueba de columnas y bloques</title>
	<style>
		#pagina{
			width:960px;
			margin:0 auto;
			border:0px solid #000;
		}
		#columnas{
			width:658px;
			float:left;
			border:1px solid #000;
		}
		#coli{
			float:left;
			width:300px;height:500px;
			background:red;
		}
		#colc{
			float:left;
			width:358px;height:500px;
			background:green;
		}
		#cold{
			float:left;
			width:300px;height:500px;
			background:blue;
		}
		#tit3cols{
			float:left;
			width:100%;height:300px;
			background:grey;
			display:none;
		}
		#tit2cols{
			float:left;
			width:660px;height:300px;
			background:yellow;
		}
	</style>
</head>
<body>
<div id="pagina">
	<div id="tit3cols"><h1>El titular a Tres Columnas</h1></div>
	<div id="tit2cols"><h1>El titular a Dos Columnas</h1></div>	
	
	<div id="columnas">
		<h1>Agrupa Dos Columnas</h1>
		
		<div id="coli">
			<h1>Izquierda</h1>
		</div>
		
		<div id="colc">
			<h1>Centro</h1>
		</div>
		
		
	</div>
	
		<div id="cold">
			<h1>Derecha</h1>
		</div>
			
</div>	
</body>
</html>

Muchas gracias a todos.

pzin · #2 (**permalink**) 05/07/2013, 03:14

En principio especificando un ancho mínimo para el titular, flotarlo a la izquierda y luego el elemento azul, flotarlo a la derecha, debería de valer.

Sobre algo así:

Código HTML:

Ver original<header>
    <h1></h1>
</header>
 
<aside></aside>
 
<div></div>

Aplicar un CSS como este:

Código CSS:

Ver originalheader {
  float: left;
  min-width: 70%;
}
 
aside {
  float: right;
  width: 30%;
}
 
div {
  width: 70%;
}

Puedes verlo funcionando, y si le pones más texto al h1 verás que aside se va hacia abajo.

Luego ya dentro de ese div le metes lo que necesites.