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

POLLOIDER · #1 (**permalink**) 21/04/2010, 16:47

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.

w0rldart · #2 (**permalink**) 21/04/2010, 17:20

Mirate esto

http://www.sohtanaka.com/web-design/...-w-css-jquery/

POLLOIDER · #3 (**permalink**) 21/04/2010, 17:36

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?

SPAWN3000 · #4 (**permalink**) 21/04/2010, 18:18

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>

sebaweb · #5 (**permalink**) 21/04/2010, 21:16

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

w0rldart · #6 (**permalink**) 22/04/2010, 04:49

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

jomaruro · #7 (**permalink**) 22/04/2010, 14:35

Hola:

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

Saludos.