Problema con celdas

[miligraf]

Soy nuevo en CSS y tengo un problema con 1 celda...aqui va la imagen:

**intente agregar una imagen pero no me dejo por los 30 posts requeridos para poner enlaces**

Como pueden ver son 3 celdas, 2 que estan a la par y una que esta debajo de ambas. El problema es que me pongo a agregar contenido en cualquiera de las 2 celdas de arriba pero la celda de abajo no se desplaza...sino que queda fija.

Aqui esta el CSS de las 3 celdas, de la 'tabla' y del body:

Código:

body 
{
	background-image:url('img/bg.jpg');
	background-repeat:repeat-x;
	background-color:#8C8C8C;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
}

div.contenido {
	position:relative;
	width:724px;
	margin-left:auto;
	margin-right:auto;
}

div.principal {
	position:absolute;
	left:6px;
	top:241px;
	width:517px;
	background-image: url('img/13.jpg');
	background-color:#626262;
	background-repeat:repeat-x;
}

div.caja-extra {
	position:absolute;
	left:529px;
	top:382px;
	width:189px;
	background-image: url('img/17.jpg');
	background-color:#626262;
	background-repeat:repeat-x;
}

div.abajo {
	position:absolute;
	top:562px;
	width:724px;
	height:11px;
	background-image: url(img/18.jpg);
}

Las clases 'principal' y 'caja extra' son las dos celdas superiores y 'abajo' es la que esta debajo de ambas.

Muchas gracias por su ayuda.

[Rafael]

Quita position absolute

[miligraf]

muchas gracias Rafael, eso ha arreglado mi problema y he cambiado partes de mi CSS. ahora, luego de solventar la mayoria de problemas que tenia, se me presenta uno que no le encuentro como solucionarlo...

Tengo 1 celda a la par de 3 celdas pero si en el html pongo el codigo de la primera celda antes del codigo de las 3 celdas, entonces las 3 celdas aparecen hasta que termina el texto que he introducido en la primera celda pero si pongo primero las 3 celdas y luego la otra celda, entonces me pasa al reves.

Gracias!

[miligraf]

Aqui esta una imagen del problema:

img133.imageshack.us/img133/8271/1nl2.jpg

Gracias!

[Rafael]

Humm, ya vi la imagen, no entiendo bien. ¿Un codigo para revisar quizá?

[miligraf]

Problema resuelto Rafael, muchas gracias.

Ahora tengo uno nuevo jejeje, pues queriendo hacer un CSS compatible con IE (pues el que estaba trabajando lo visualizaba con Firefox), los problemas son estos:

1. El div.banner no cubre todo el ancho que deberia como lo hace en Firefox:
img107.imageshack.us/img107/5222/3of5.jpg

2. El div.abajo se repite:
img111.imageshack.us/img111/8931/4oa8.jpg

Aqui esta el CSS:

Código:

body 
{
	background-image:url('img/bg.jpg');
	background-repeat:repeat-x;
	background-color:#8C8C8C;
	margin:0px 0px 0px 0px;
}

div.contenedor {
	width:724px;
	margin:auto;
	background-image:url('img/contenido-bg.jpg');
	background-repeat:repeat-y;
	background-position:center;
}

div.borde-izq {
	float:left;
	margin-top:0px;
}

div.banner {
	margin:0px auto;
	height:54px;
	background-image: url('img/02.jpg');
}

div.borde-der {
	float:right;
	margin-top:0px;
}

div.espacio-superior {
	margin:-202px 6px 0px 6px;
	height:13px;
}

div.menu {
	margin:-4px 0px 0px 0px;
	height:92px;
}

div.inicio {
	margin:0px 585px 0px 6px;
}

div.tutoriales {
	margin:-96px 455px 0px 136px;
}

div.afiliados {
	margin:-96px 325px 0px 266px;
}

div.contacto {
	margin:-96px 192px 0px 396px;
}

div.pan-diario {
	margin:-96px 6px 0px 529px;
	height: 92px;
	background-image: url('img/09.jpg');
}

div.cuerpo {
	margin:-4px -6px 0px 6px;
	width: 712px;
}

div.contenido {
	float: left;
	width: 523px;
	margin-top:0px;
}

div.anuncio {
	margin:0px 0px 0px 0px;
	height:82px;
	background-image: url('img/10.jpg');
}

div.principal {
	margin:0px 0px 0px 0px;
	background-image: url('img/13.jpg');
	background-repeat:no-repeat;
}

div.cajas {
	float:right;
	width: 189px;
	margin-top:0px;
}

div.tutoriales-azar {
	margin:0px 0px 0px 0px;
	height:82px;
	background-image: url('img/11.jpg');
}

div.afiliados-azar {
	margin:0px 0px 0px 0px;
	height:141px;
	background-image: url('img/15.jpg');
}

div.caja-extra {
	margin:0px 0px 0px 0px;
	background-image: url('img/17.jpg');
	background-repeat:no-repeat;
}

div.abajo {
	margin-bottom:0px;
	height:11px;
	background-image: url('img/18.jpg');
}

div.leyenda {
	text-align: center;
}

Y el HTML:

Código:

<body>
<div class="contenedor">

	<div class="borde-izq">
	<img src="img/01.jpg" alt="" border="0" />
	</div>
	
	<div class="borde-der">
	<img src="img/03.jpg" alt="" border="0" />
	</div>
	
	<div class="banner">
	</div>
	
	<div class="espacio-superior">
	<img src="img/04.jpg" alt="" width="712" height="13" border="0" />
	</div>
	
	<div class="menu">
	
			<div class="inicio">
			<img src="img/05.jpg" width="130" height="92" alt="" border="0" />
			</div>
			
			<div class="tutoriales">
			<img src="img/06.jpg" width="130" height="92" alt="" border="0" />
			</div>
			
			<div class="afiliados">
			<img src="img/07.jpg" width="130" height="92" alt="" border="0" />
			</div>
			
			<div class="contacto">
			<img src="img/08.jpg" width="133" height="92" alt="" border="0" />
			</div>
			
			<div class="pan-diario">
			</div>
	
	</div>
	
<div class="cuerpo">
	
	<div class="contenido">
	
			<div class="anuncio">
			</div>
			
			<div class="principal">
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			</div>
	
	</div>
	
	<div class="cajas">
	
			<div class="tutoriales-azar">
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			</div>

			<div class="afiliados-azar">
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			</div>
			
			<div class="caja-extra">
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			</div>
	
	</div>
	
</div>
	
	<div class="abajo">
	</div>
	
</div>
<div class="leyenda">Texto</div>
</body>

Gracias por su tiempo y ayuda.

[Rafael]

Trata de agregar en div abajo background-repeat: no repeat;

y al banner ¿quizá un width específico width: 150px;?

[miligraf]

Rafael, fijate que al poner que no repita el fondo en el div.abajo, pude ver que el problema es con el div.contenedor (es el que contiene todos los divs) y este es el que hace que se repita el fondo.

Y para el div.banner, le pongo un width determinado y me da un problema, me tira todo para abajo y creo que es porque tengo 2 float (div.borde-izq y div.borde-der) junto al div.banner y aunque le ponga un margin para que se tenga que visualizar bien, me da el mismo problema.

Saludos y gracias.

[Rafael]

MM, deja revisar con más calma el codigo, si tienes una liga para ver más concreto el ejemplo mejor, pero estoy un poquito cargado de trabajo, :) así que tenme un poquito de paciencia.

[miligraf]

Gracias, para mientras trabajare en lo demas.

[Rafael]

Hola. Retomando tu post. ¿Ya se solucionó? ¿tienes una liga para ver el defectillo?