Una sola línea y una columna a continuación son una cita:
cuerpo { margen: 0px; relleno: 0px; alineación de texto: centro }
#content { margin-left:auto; margin-right:auto; ancho: 400px; ancho: 370px }
Dos filas y una columna.
cuerpo {margen: 0px; relleno: 0px; alineación de texto: centro;}
#content-top { margen-izquierda:auto; margen-derecha:auto; ancho: 400px; ancho: 370px;}
#content-end {margin-left:auto; margin-right:auto; ancho: 400px; ancho: 370px;}
Tres filas y una columna.
cuerpo { margen: 0px; relleno: 0px; alineación de texto: centro }
#content-top { margen-izquierda:auto; margen-derecha:
auto; ancho: 400px; ancho: 400px
;; }
#content-end { margin-left:auto; margin-right:auto; ancho: 400px; ancho: 370px }
Una sola fila y dos columnas.
#bodycenter { ancho: 700px; margen derecho: automático; margen izquierdo: automático; desbordamiento: automático }
#bodycenter #dv1 {flotante: izquierda; ancho: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}
Dos filas y dos columnas El siguiente es un fragmento de cita:
#encabezado{ ancho: 700px; margen derecho: automático; margen izquierdo: automático; desbordamiento: automático;}
#bodycenter {ancho: 700px; margen derecho: automático; margen izquierdo: automático;
#bodycenter #dv1 {float: izquierda; ancho: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}
Tres filas y dos columnas Lo siguiente es un fragmento de cita:
#encabezado{ ancho: 700px; margen derecho: automático; margen izquierdo: automático }
#bodycenter {ancho: 700px; margen derecho: automático; margen izquierdo: automático;
#bodycenter #dv1 { float: izquierda;ancho: 280px;}
#bodycenter #dv2 { float: derecha; ancho: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto }
Posicionamiento absoluto de una sola fila y tres columnas.
#izquierda { posición: absoluta; arriba: 0px; izquierda: 0px ancho: 120px;
#medio {margen: 20px 190px 20px 190px }
#right {posición: absoluta; arriba: 0px; derecha: 0px; ancho: 120px;}
posicionamiento flotante uno
xhtml:
Aquí hay una cita:
<div id="warp"> <div id="column"> <div id="column1">Esta es la primera columna</div> <div id="column2">Esta es la segunda columna</div> <div class="clear"></div> </div> <div id="column3">Esta es la tercera columna</div> <div class="clear"></div> </div>
CSS :
Aquí hay una cita:
#wrap{ ancho:100%; alto:auto;}
#columna{ float:izquierda; ancho:60%;}
#columna1{ flotador:izquierda; ancho:30%;}
#columna2{ flotador:derecha; ancho:30%;}
#columna3{ flotador:derecha; ancho:40%;}
.clear{ clear:both;}
posicionamiento flotante dos
xhtml:
El siguiente es un fragmento citado: <div id="center" class="column"> <h1>Este es el contenido principal.</h1> </div> <div id="left" class="column"> <h2 >Esta es la barra lateral izquierda.</h2> </div> <div id="right" class="column"> <h2>Esta es la barra lateral derecha.</h2> </div>
CSS:
Aquí hay una cita:
cuerpo {margen: 0;relleno-izquierda: 200px;relleno-derecha: 190px;ancho mínimo: 240px;}
.columna {posición: relativa; flotador: izquierda;}
#centro {ancho: 100%;}
#izquierda {ancho: 180 px; derecha: 240 px; margen izquierdo: -100%;}
#right {ancho: 130px;margin-right: -100%;}
Dos filas y tres columnas
xhtml: El siguiente es un fragmento citado: <div id="header">Aquí está la fila superior</div> <div id="warp"> <div id="column"> <div id="column1"> Aquí está la primera fila Una columna</div> <div id="column2">Esta es la segunda columna</div> <div class="clear"></div> </P> <P></div > <div id= "column3">Esta es la tercera columna</div> <div class="clear"></div> </div>
CSS:
Aquí hay una cita:
#encabezado{ancho:100%; alto:automático;}
#wrap{ ancho:100%; alto:auto;}
#columna{ float:izquierda; ancho:60%;}
#columna1{ flotador:izquierda; ancho:30%;}
#columna2{ flotador:derecha; ancho:30%;}
#columna3{ flotador:derecha; ancho:40%;}
.clear{ clear:both;}
tres filas y tres columnas
xhtml:
El siguiente es un fragmento citado: <div id="header">Aquí está la fila superior</div> <div id="warp"> <div id="column"> <div id="column1">Aquí está la primera columna </div> <div id="column2">Esta es la segunda columna</div> <div class="clear"></div> </div> <div id="column3">Esta es la tercera columna </div> <div class="clear"></div> </div> <div id="footer">Esta es la fila inferior</div>
CSS:
Aquí hay una cita:
#encabezado{ancho:100%; alto:automático;}
#wrap{ ancho:100%; alto:auto;}
#columna{ float:izquierda; ancho:60%;}
#columna1{ flotador:izquierda; ancho:30%;}
#columna2{ flotador:derecha; ancho:30%;}
#columna3{ flotador:derecha; ancho:40%;}
.clear{ claro:ambos;}
#pie de página{ancho:100%; alto:automático;}