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.