CSS básico, por favor, ayuda!!!

drito7 · #1 (**permalink**) 04/07/2007, 11:43

Hola.
Soy novato en CSS y creo que tengo un problema muy básico pero llevo horas y no consigo arreglarlo.
La cuestion es que tengo una capa contenedora llamada "contenido" con las propiedades de borde 1px color verde y con color de fondo gris.
Dentro de esta capa contenedora tengo dos capas, una que flota a la izquierda y otra a la derecha.
Pues el problema es que la capa contenedora no engobla a estas dos capas ya que estas dos no tienen el fondo y borde de la capa contenedora.

EL CODIGO (muy sencillo)

<style type="text/css">

#contenido {
border:1px solid #66FF66;
background-color:#CCCCCC;
}
#leftcol {
width: 18%;
float: left;
}

#rightcol {
float:right;
width:81.3%;
}
</style>
<div id="contenido">
<div id="leftcol">
Esto es la parte izquierda<br />
dsadsadsa
</div>
<div id="rightcol">
Esto es la parte derecha
<br />
dadsadsa
</div>
</div>

Pues al ejecutarlo no me sale el color de fondo del contenedor ni el borde en las dos capas que engloba.

Estoy desesperado y si alguien me puede ayudar se lo agradecería bastante..
Saludos y muchas gracias de antemano

Raulmmmm · #2 (**permalink**) 04/07/2007, 14:06

Prueba a ponerle a todo position: relative;
Saludos

drito7 · #3 (**permalink**) 04/07/2007, 15:03

Hola.
Poner position:relative ya lo he probado y nada... todo sigue igual.
Saludos

pablinff · #4 (**permalink**) 04/07/2007, 15:36

Probá poniendole al Div Contenedor esto:

Código:

#contenido {
position:absolute;
border:1px solid #66FF66;
background-color:#CCCCCC;
}

Espero que te sirva.
Saludos!

padapapoulos · #5 (**permalink**) 06/07/2007, 13:06

El problema de siempre, no has aclarado el float y eso es lo que pasa, cuando flotas un elemento rompes el flow de pagina, asi que hay que devolverselo, mira usa este codigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Comienza id #menu */
.clear {
clear: both;
height: 0;
}
#contenido {
border:1px solid #66FF66;
background-color:#CCCCCC;
}
#leftcol {
width: 18%;
float: left;
}
#rightcol {
float:right;
width:81.3%;
}
</style>
<title></title>
</head>
<body>
<div id="contenido">
<div id="leftcol">
Esto es la parte izquierda<br />
dsadsadsa
</div>
<div id="rightcol">
Esto es la parte derecha
<br />
dadsadsa
</div><br class="clear" />
</div>
</body>
</html>

drito7 · #6 (**permalink**) 19/07/2007, 12:33

Cita:

Iniciado por padapapoulos

El problema de siempre, no has aclarado el float y eso es lo que pasa, cuando flotas un elemento rompes el flow de pagina, asi que hay que devolverselo, mira usa este codigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Comienza id #menu */
.clear {
clear: both;
height: 0;
}
#contenido {
border:1px solid #66FF66;
background-color:#CCCCCC;
}
#leftcol {
width: 18%;
float: left;
}
#rightcol {
float:right;
width:81.3%;
}
</style>
<title></title>
</head>
<body>
<div id="contenido">
<div id="leftcol">
Esto es la parte izquierda<br />
dsadsadsa
</div>
<div id="rightcol">
Esto es la parte derecha
<br />
dadsadsa
</div><br class="clear" />
</div>
</body>
</html>

Hola.. primero pedir perdon por la tardanza en la respuesta.

Pues de esta forma me va bien, darte las gracias compañero.

Saludos

blanchrt · #7 (**permalink**) 19/07/2007, 16:58

Prueba a FLOTAR también EL CONTENEDOR (#contenido) a la izquierda y quita el <br /> (y ahórrate de paso la clase .clear).

Además de que el <br /> es innecesario y poco semántico, el atributo "clear" es inválido en las nuevas especificaciones de XHTML (tanto en la 1.0 estricta como en la 1.1), así que evítate tener que arreglarlo tarde o temprano y prueba lo que te digo.

(Como todo en este imprevisible mundo del CSS, no te aseguro que funcione al 100%, pero te puedes llevar una sorpresa y siempre es mejor no andarse con trucos cuando no hace falta).

¡Dinos si funciona!

Un saludo,
Paco Blanchart

drito7 · #8 (**permalink**) 21/07/2007, 09:06

Cita:

Iniciado por blanchrt

Prueba a FLOTAR también EL CONTENEDOR (#contenido) a la izquierda y quita el <br /> (y ahórrate de paso la clase .clear).

Además de que el <br /> es innecesario y poco semántico, el atributo "clear" es inválido en las nuevas especificaciones de XHTML (tanto en la 1.0 estricta como en la 1.1), así que evítate tener que arreglarlo tarde o temprano y prueba lo que te digo.

(Como todo en este imprevisible mundo del CSS, no te aseguro que funcione al 100%, pero te puedes llevar una sorpresa y siempre es mejor no andarse con trucos cuando no hace falta).

¡Dinos si funciona!

Un saludo,
Paco Blanchart

Hola.

Pues de esta forma me funciona en IE pero en firefox no.

Saludos y gracias por el aporte