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>