No me funciona la propiedad clear:both

[NeoAkira]

Bueno chicos antes de crear este tema busque por la web todo lo relacionado con el clear:both ya que quiero estirar una capa en la barra lateral para que no se vea vacía, pero agrego esta funcion en el html <div class="clearAll"></div> y no funciona

esta es la css del clearAll

.clearAll{
clear:both;
}

aqui les muestro mi css para que miren a lo que me refiero

Código:

* {
	margin:0;
	padding:0;
	border:0;
}

a {
	color: #1e449d;
	text-decoration: underline
}	


 a:hover {
	color: #1e449d;
	text-decoration: none}

body {
	font:11px Verdana, Arial, Tahoma, sans-serif;
	background:#fff url("imagenes/fondo.gif") repeat;
	margin-top:0px;
	
	
}

#contenedor {
    width:900px;
	background:#fff;
	margin:0 auto 0 auto;
	border-right:2px solid #277ec7;
}

#menu_principal {
	background:#ecebeb;
	font-weight:bold;
	font-family:Arial, Tahoma, Verdana, sans-serif;
	margin-right:2px;
	margin-left:2px;
	height:24px;
	margin-bottom:1px;
	
}
	
#menu_principal a span {
    background:#ffffff;
	line-height:21px;
	padding:0 8px;
	display:block;
	
}
	
#menu_principal a.pestana {
	
	border-top:1px solid #dcdcdc;
	border-left:1px solid #dcdcdc;
	border-right:1px solid #dcdcdc;
	text-decoration:none;
	background-color:transparent;
	color:#2d71ed;
	float:right;
	margin:3px 3px 0 0;
	outline:none;
}

#menu_principal a:hover {
	background:#fff;
	border-top:1px solid #2c71e2;
	border-left:1px solid #2c71e2;
	border-right:1px solid #2c71e2;
	color:#000000;
}

 /*definimos el logo de la pagina*/
#banner{
	background:#fff url("/v4/imagenes/logo.jpg") left;
	height:95px;
	text-align:right;
	margin-right:2px;
	margin-left:2px;
}
#sddbar {
padding: 3px;
border: 1px solid #ccc;
margin-left: 610px;
width: 275px;
text-align: justify;
position: absolute;
background-color: #F1F1F1;
opacity:0.8;filter:alpha(opacity=60);

}

#sddbar:hover {
opacity:1;filter:alpha(opacity=100);
}


#footer {
	background:#9b9b9b url("/imagenes/footer_izq.gif") left top no-repeat;
	margin:10px 2px 0px 2px;
	color:#000;
}

	#footer div {
		background:transparent url("/imagenes/footer_der.gif") right top no-repeat;
		padding:0 8px;
		line-height:24px;
		
	}
	
	#footer a {
	color:#000;
	text-decoration:none;
	
	}
	
	#footer a:hover {
	color:#000;
	text-decoration:none;
	}
#footer img
{
margin-left:10px;
margin-top:3px;
}	

.menu_simple
{
	font-size:10px;
	padding:0 13px;
	line-height:20px;
	border-bottom:1px dashed #a5a5a5;
	margin-bottom:10px;
	min-height:20px;
}

#publicidad {
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}

	div#mensaje {
			background-color:#f3d7d7;
			border:1px solid #000;
			border-bottom:1px solid #000;
			padding:10px;
			margin-right:10px;
			margin-left:10px;
			margin-bottom:10px;
			
		}
		
		div#mensaje {
			
			color:#000;
			line-height:16px;
		}
		
			div#mensaje a {
				color:#000;
			}
#cuerpo_de_noticias{
    padding-bottom:5px;
	margin-bottom:10px;
	border-bottom:1px solid #dcdcdc;	
}

#cuerpo_de_noticias a:hover{
    text-decoration:none;	
}
#noticias{
	width:570px;
	text-align: left;
	padding-left: 8px;
}			

h1 small {
	display: block;
	font-size: 55%;
}

h1 {
	font-size:14px;
	color:#3386cc;
}

h1 a {
	color:#CC6633 !important;
	text-decoration:none !important;
}
	
h1 a:hover {
	text-decoration:underline !important;
}

#separador {
color:#000000 !important;
border: 1px solid #FFA851;
}

#pestana_noticias {
	border-bottom:1px solid #2d71ed;
	font-weight:bold;
	font-family:Arial, Tahoma, Verdana, sans-serif;
	height:25px;
	margin-bottom:10px;
	padding-left:0px;
	
}

#pestana_noticias a span {
    
	line-height:21px;
	padding:0 8px;
	display:block;
	
}
	
#pestana_noticias a.pestana {
	border-bottom:1px solid #2d71ed;
	border-top:1px solid #dcdcdc;
	border-left:1px solid #dcdcdc;
	border-right:1px solid #dcdcdc;
	text-decoration:none;
	background-color:transparent;
	color:#2d71ed;
	float:left;
	margin:3px 3px 0 0;
	outline:none;
}
#pestana_noticias a.selec {
	border-bottom:1px solid #fff;
	border-top:1px solid #2c71e2;
	border-left:1px solid #2c71e2;
	border-right:1px solid #2c71e2;
	text-decoration:none;
	background-color:#fff;
	color:#2d71ed;
	float:left;
	margin:3px 3px 0 0;
	outline:none;
}


#pestana_noticias a:hover {
	background:#fff;
	border-bottom:1px solid #fff;
	border-top:1px solid #2c71e2;
	border-left:1px solid #2c71e2;
	border-right:1px solid #2c71e2;
	color:#000000;
}
/*Definimos los divs de los bloques*/

#bloque{
width:300px;
margin-bottom:-10px;
float:right;

}
#cuerpo_bloque{
	background:#f2f1f1; 
}
dl.ultimos_foro {
	padding:10px;
	background:#f2f1f1;
}

dl.ultimos_foro a:visited {
    font-family: Verdana, Arial, Tahoma, sans-serif;
	font-weight:none;
	font-size:11px;
	color:#4B4B4B;
	text-decoration:none;
}
			
dl.ultimos_foro a {
    font-family: Verdana, Arial, Tahoma, sans-serif;
	font-weight:none;
	font-size:11px;
	color:#4B4B4B;
	text-decoration:none;
}
				
dl.ultimos_foro a:hover {
	color:#2d71ed;
	text-decoration:underline;
}
			
.ultimos_foro dd {
    font-family: Verdana, Arial, Tahoma, sans-serif;
	font-weight:none;
	color:#b3b3b3;
	font-size:9px;
	padding-left:11px;
	margin-bottom:5px;
}
			


#ultimos_foros {
	background:#ffffff;
	font-weight:bold;
	font-family:Arial, Tahoma, Verdana, sans-serif;
	height:24px;
	margin-bottom:1px;
}
	
#ultimos_foros div span {
	
	line-height:21px;
	padding:0 8px;
	display:block;
	
}
	
#ultimos_foros div.pestana {
	border-top:1px solid #dcdcdc;
	border-left:1px solid #dcdcdc;
	border-right:1px solid #dcdcdc;
	text-decoration:none;
	background-color:#ffffff;
	color:#2d71ed;
	float:left;
	margin:3px 3px 0 0;
	outline:none;
}

#ultimos_foros div:hover {
	background:#fff;
	border-top:1px solid #2d71ed;
	border-left:1px solid #2d71ed;
	border-right:1px solid #2d71ed;
	color:#000000;
	cursor: pointer;
}
.button {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background:#fff;
border:#333;
}

/* Rollover buttons
   Based on: http://wellstyled.com/css-nopreload-rollovers.html
----------------------------------------*/
.buttons {
	float: right;
	width: auto;
	height: auto;
}

/* Rollover state */
.buttons div {
	float: left;
	margin: 0 5px 0 0;
	background-position: 0 100%;
}

/* Rolloff state */
.buttons div a {
	display: block;
	width: 100%;
	height: 100%;
	background-position: 0 0;
	position: relative;
	overflow: hidden;
}

input.button1, input.button2 {
	font-size: 1em;
}

a.button1, input.button1, input.button3, a.button2, input.button2 {
	width: auto !important;
	padding-top: 1px;
	padding-bottom: 1px;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #000;
	background: #FAFAFA none repeat-x top left;
}

a.button1, input.button1 {
	font-weight: bold;
	border: 1px solid #666666;
}

input.button3 {
	padding: 0;
	margin: 0;
	line-height: 5px;
	height: 12px;
	background-image: none;
	font-variant: small-caps;
}
/* Form button styles
---------------------------------------- */

a.button1, input.button1, input.button3, a.button2, input.button2 {
	color: #000;
	background-color: #FAFAFA;
	background-image: url("/images/bg_button.gif");
	cursor:pointer;
}

a.button1, input.button1 {
	border-color: #666666;
}

input.button3 {
	background-image: none;
}
/* Alternative button */
a.button2, input.button2, input.button3 {
	border: 1px solid #666666;
}

/* <a> button in the style of the form buttons */
a.button1, a.button1:link, a.button1:visited, a.button1:active, a.button2, a.button2:link, a.button2:visited, a.button2:active {
	text-decoration: none;
	color: #000000;
	padding: 2px 8px;
	line-height: 250%;
	vertical-align: text-bottom;
	background-position: 0 1px;
}

/* Hover states */
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
	border: 1px solid #3366FF;
	background-position: 0 100%;
	color: #3366FF;
}

input.disabled {
	font-weight: normal;
	color: #666666;
}

Si me pudieran ayudar les estaria agradecido :D

[NeoAkira]

Alguna idea jovenes? por mas que intento no logro hacer funcionar esta propiedad :S

[jomaruro]

Hola:

Sería mejor que pusieras la URL de tu web o por lo menos tambien el HTML. Viendo solo el CSS es difícil saber que es cada cosa y donde está puesta.

Saludos.

[NeoAkira]

Gracias por responder bro aquí dejo el enlace a la web

http://www.necross-fansub.com/v4

[elbuensaint]

pero en ese enlace no usas ningun div con class "clearAll", solo vi al principio un div con la clase "clear". Para que quieres usar el div clearAll o que es lo que esperas ver en tu diseño?

Porque por como lo veo, si el div que quieres que tenga la clase clearAll esta al inicio del body, sin contenido ni ancho-alto definido y con clear:both, no pasara nada, se mostrará el contenido como si no hubiera nada ahí, porque realmente no hay nada dentro del div.

[NeoAkira]

Lo que quiero lograr es como esta web

http://www.mcanime.net

osea como ellos tienen su barra lateral.

[jomaruro]

Hola:

No entiendo que quieres hacer ni donde, no sé a que barra lateral te refieres ni donde la quieres poner.

Saludos.

[DragonX]

Iniciado por NeoAkira

http://www.mcanine.net

http://www.mcanime.net/
Y que es l oque queres hacer?

[NeoAkira]

Bueno lo que quiero es que la barra lateral que esta en mi web vease la url que deje arriba, se deslize por completo hacía abajo y que no quede ese espacio vacío, por el momento no tengo aplicada la función clear:both

[NeoAkira]

borrado por admin