Mucha teoría en el post anterior así que mejor vamos a algo más concreto.
Para maquetar a dos columnas debemos hacer que dos divs floten, uno a la izquierda y otro a la derecha, hasta ahi suena muy simple pero debido a ciertos problemas en IE6 y otras peculiaridades, debemos agregar algo más de código, primero publicaré el código y luego lo destriparé línea por línea
1 2 3 4 5 6 7 8 9 10 11 12 13 |
En cuanto al código html no hay nada espectacular tengo un div Wrapper que contiene toda la página web, debajo del Header tengo un div Main que me va a servir para contener a ambas columnas y debajo de estas un br este es util para que el div contenedor crezca en función de los divs que flotan. ¿Por qué el clear:both? Esta propiedad permite que desaparezca lo que flota, es como una pequeña traba a los divs que están flotando.
Estilos CSS de las columnas
Bueno, vamos con el css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | #wrapper { width:800px; height:auto; margin:auto; } #header { height:120px; background-color:#FFCC33; } #main { width:800px; overflow:hidden; height:auto; } #column_left { width:200px; background-color:#5B7444; height:300px; float:left; } #column_right { width:590px; background-color:#47697E; height:300px; float:right; } #footer { height:100px; background-color:#688B9A; } |
Al wrapper le he dado un height auto porque no deseo que tenga un tamaño fijo sino que crezca en función de los divs que contiene, además tiene un margin:auto para que este centrado.
Al header no le he dado width porque los divs son como los gases, automaticamente toman el tamaño del div que los contiene
Al main en cambio si le he dado un width eso es porque los divs que contienen a otros flotantes para que crezcan deben tener un overflow:hidden ademas deben tener un width definido ya sea un valor fijo en pixeles o un porcentaje.
En el footer no hay nada que comentar.
hola, analizando tu codigo, veo que tienes un error de escritura
el column_right tiene que ser de «600px» y no de 590px 😀
hola, analizando tu codigo, veo que tienes un error de escritura
el column_right tiene que ser de \
Querido Miguel, utilicé tu tutorial para hacer un sitio interno en mi page, que lleva a varias paginas, pero me quede a la hora de los niveles. En tu tutorial los niveles del contenido van de esta manera:
index.php -> pages.php -> homepage.php, si no me equivoco.
Cuando haces click en services por ejemplo el codigo Services, me lleva a cargar la pagina services dentro de index, como debe ser… Ahora viene mi problema:
Yo tengo la siguiente cadena:
index.php -> carga.php -> pages,php -> homepage.php
Ahora, quiero cargar en homepage la pagina service, por ejemplo, pero que esta se cargue en index.php, y el codigo no me lo hace.
¿En que tendria que variar el codigo para que me cargue en index?, intente hacer que se cargue en «carga.php» pero no es el resultado esperado.
Gracias de antemano
Gracias por tu post, me resulto una gran ayuda. Quiero pedirte un favor si es posible. Necesito hacer una página en la que haya dos columnas. Una columna principal a la izquierda digamos de 600px de ancho y otra la derecha de 200px. Hasta ahí todo bien. El problema es que quiero que la columna derecha (la de 200px) solo sea visible cuando tenga algún contenido adentro. Si no tiene ningún contenido, entonces quiero que no se muestre y que la columna principal (la de 600px) pase a ocupar el espacio que dejó libre la columna derecha; osea que pase a tener 800px de ancho.
¿Es posible hacer esto con CSS o debo usar JavaScript?
Te agradezco cualquier información que puedas brindarme.
Saludos.
Jorge