Código fuente Ya.

Puede ejecutar la o las páginas para probar el concepto inmediatamente.

 

Concepto:Layout de 3 columnas (con redimensión de la columna central)

El concepto trata sobre:html,css
Autor:

Retornar

Nombre del archivo:pagina1.html

Comentarios
La columna1 flota hacia izquierda y tiene un ancho fijo:
#columna1 {
  float: left;
  width: 9.25em;
  background: #eee;
}

Luego es importante destacar que la columna2 contiene la columna3:
    <div id="columna2">
      <div id="columna3">	
        Columna derecha<br>
        Columna derecha<br>
        Columna derecha<br>
        Columna derecha<br>
        Columna derecha<br>
        Columna derecha<br>
        Columna derecha<br>
        Columna derecha<br>

        </div>
	  <div id="articulos">
            <div class="articulo" id="art1">
		  <h2>Titulo de articulo 1</h2>
            <p>
             ...............

La hoja de estilo define un ancho automático para la columna2 (también es importante la propiedad
margin-left para que no invada la columna1):		   
#columna2 {
  width: auto;
  margin-left: 10em;
}
		   
La columna3 que está dentro de la columna2 flota a derecha (con lo que obtenemos la tercer columna
dentro de la página):
#columna3 {
  float: right;
  width: 16em;
  padding:1em;
  background: #eee;
}
Nombre del archivo:estilos.css

Retornar



Código Fuente Ya - 2015