Foros del Web » Creando para Internet » CSS »

3 columnas dentro de una cabecera (div con tamaño 100%)

Estas en el tema de 3 columnas dentro de una cabecera (div con tamaño 100%) en el foro de CSS en Foros del Web. Hola, me estoy rompiendo la cabeza y no consigo meter 3 columnas en una div denominada container que es la cabecera de un foro. Actualmente ...
  #1 (permalink)  
Antiguo 21/04/2010, 16:47
 
Fecha de Ingreso: abril-2010
Mensajes: 2
Antigüedad: 13 años, 11 meses
Puntos: 0
3 columnas dentro de una cabecera (div con tamaño 100%)

Hola, me estoy rompiendo la cabeza y no consigo meter 3 columnas en una div denominada container que es la cabecera de un foro.

Actualmente tiene dos divs con dos imágenes. En la izquierda tiene un logo y en la derecha una imagen aleatoria, quedando un espacio enorme en el centro. Lo que pretendo es poner otra div en el centro que me permita colocar un banner o código publicitario.

El div que tiene que contener esas 3 divs es un div con tamaño 100%, no en pixels, ni nada, que se ajusta a la resolucion de pantalla perfectamente. Por ejemplo yo tengo una resolución con anchura de 1600 px y se ve bien el foro y no me gustaría perder ese 100% y tener que ajustar el div contenedor a unos pixels determinados.

Por más que he intentado agregar otra div central, la div de la izquierda se desplaza hacia abajo y no sale bien.

El formato que yo quiero para la cabecera es este:

Logo --- espacio central para banner --- imagen aleatoria

¿alguien me puede ayudar?

Con tablas lo consigo fácil pero con div no hay manera.

Gracias.
  #2 (permalink)  
Antiguo 21/04/2010, 17:20
 
Fecha de Ingreso: junio-2009
Ubicación: Madrid
Mensajes: 402
Antigüedad: 14 años, 9 meses
Puntos: 20
Respuesta: 3 columnas dentro de una cabecera (div con tamaño 100%)

Mirate esto

http://www.sohtanaka.com/web-design/...-w-css-jquery/
  #3 (permalink)  
Antiguo 21/04/2010, 17:36
 
Fecha de Ingreso: abril-2010
Mensajes: 2
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: 3 columnas dentro de una cabecera (div con tamaño 100%)

No hay algo más simple que eso? en ese ejemplo veo que hay que usar Jquery, metiendo código por todos lados. En serio, no hay nada más simple o mejor retorno a las tablas?
  #4 (permalink)  
Antiguo 21/04/2010, 18:18
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años
Puntos: 15
Respuesta: 3 columnas dentro de una cabecera (div con tamaño 100%)

Si algo simple:

No tiene todo lo que debería pero es lo básico para darte una idea.

Código:
<html>
<head>
<style>
/*Recomiendo usar un reset de CSS*/
body{
	margin:0px;
}
.container {
	width: 90%;
	height: auto !important;
	height: 100px;
	margin-left: 5%;
	margin-right: 5%;
	border:1px solid #ffcc00;
}
.container .cols3 {
	background-color:#eee;
	width: 33.10%;
	height:100px;
	float:left;
	border:1px solid #333;
}
html body * div.clear
{
	background: none; border: 0;
	clear: both; display: block;
	float: none; font-size: 0;
	list-style: none; margin: 0;
	padding: 0; overflow: hidden;
	visibility: hidden; width: 0;
	height: 0;
}
</style>
</head>
<body>
<div class="container">
	<div class="cols3">AA</div>
	<div class="cols3">AA</div>
	<div class="cols3">AA</div>
</div>
<div class="clear"></div>
<div class="container">cuerpo</div>
<div class="clear"></div>
<div class="container">footer</div>
</body>
</html>
  #5 (permalink)  
Antiguo 21/04/2010, 21:16
Avatar de sebaweb  
Fecha de Ingreso: abril-2009
Mensajes: 95
Antigüedad: 14 años, 11 meses
Puntos: 0
Respuesta: 3 columnas dentro de una cabecera (div con tamaño 100%)

como dice spawn300 , las alineas una al lado de la otra poniendolas como flotantes a la izquierda. i simepre que el tamaño te de, coimo por ejemplo si tu container es de 100 pixels, no podes alinear 4 divs dentro de 30px porque no te va a entrar. saludos
  #6 (permalink)  
Antiguo 22/04/2010, 04:49
 
Fecha de Ingreso: junio-2009
Ubicación: Madrid
Mensajes: 402
Antigüedad: 14 años, 9 meses
Puntos: 20
Respuesta: 3 columnas dentro de una cabecera (div con tamaño 100%)

Lo que yo te facilite, son columnas flexibles que se ajustan automáticamente a la ventana/resolución...

podrías aplicar eso a tus columnas y como ya tiene columnas prefabricadas, las podrías utilizar también
  #7 (permalink)  
Antiguo 22/04/2010, 14:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: 3 columnas dentro de una cabecera (div con tamaño 100%)

Hola:

Échale una vistazo al código de este ejemplo:

Saludos.


Etiquetas: columnas, tamaño, cabeceras
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:13.