DIV que no se adapta a su contenido

[AwG]

Tengo un problema. El contenido donde van saliendo las noticias no se adapta a las medidas, se queda corto... Pero bueno, mejor una imagen para explicarlo:



El codigo html es asi:

Código HTML:

<div class="maincontent">
		<div class="noticia">
                      ...
                <div>
		<div class="noticia">
                      ...
                <div>
		<div class="noticia">
                      ...
                <div>

</div> 

Y el codigo CSS asi:

Código HTML:

.maincontent{
	border-radius: 10px 10px 0px 0px;
	background-color: #666;
	float: left;

}

No entiendo por que no va creciendo a medida que los divs de su interior aumentan. Deberia llegar hasta abajo del todo. ¿Alguien sabe por que puede ser esto?

[pzin]

Seguramente puedas solucionarlo con un:

Código CSS:

.maincontent {
  overflow: hidden;
}
 

[AwG]

Que va, con eso lo que hace es cortar la ultima noticia que pasa de lo gris. Se queda tal que asi:

[AwG]

Voy a postear tambien el codigo de lo que da problemas, a ver si es que tiene algo que ver con eso.

Este es el codigo html de todo el cuadro de las noticias:

Código HTML:

<div class="news">
				<article>
				<div class="newsheader">
					<h3>'.$titulo.'</h3>
				</div>
				<div class="newscontent">
					<footer><p>Publicado '.$fecha.' by '.$autor.'</p></footer>
					<header>'.substr(nl2br($body), 0, 750).'[...]</header>
				</div>
				</article>
					
			
				<div class="newsfooter">
					<div class="tags">
					</div>
					<div class="linkpublication">
						<a href="noticias.php?id='.$id.'">Link a la publicación</a>
					</div>
				</div>
			</div> 

Y este el codigo css asociado a esas noticias:

Código HTML:

.newsheader{
	width: 90%;
	height: 40px;
	background-color: #dbdbdb;
	border-radius: 5px 5px 0px 0px;
	margin: 40px auto 0px auto;
	box-shadow: 1px 0px 3px #000;
}
.newsheader h3{
	color: #616161;
	margin : 0px 20px 0px 20px;
	padding: 10px 0px 5px 0px;
}
.newscontent{
	width: 90%;
	background-color: #FFF;
	margin: 0px auto 0px auto;
	box-shadow: 1px 1px 3px #000;
}
.newscontent p{
	margin : 0px;
	padding: 5px;
}

.newscontent header, content {

	padding: 40px 30px 20px 30px;
}
.newscontent footer{
	color: #999;
	padding-right: 15px;
	font-size: 12;
	padding-top: 10px;
	font-style: italic;
	float: right;
}
.newscontent content{
	
	text-align: justify;
	float: right;
}
.newsfooter{
	width: 90%;
	height: 30px;
	background-color: #b8b8b8;
	margin : 0px auto 0px auto;
	border-radius: 0px 0px 5px 5px;
	box-shadow: 1px 1px 3px #000;
	border:1px;
}

.linkpublication {
	width: 40%;
	float: right;
	margin-top: 7px;
	margin-right: -10px;

}
.linkpublication a{
	font-size: 12px;
	text-decoration: none;
	color: #747171;
	padding-left: 30px;
}
.linkpublication a:hover{
	font-size: 12px;
	text-decoration: none;
	color: #4b4949;
	padding-left: 30px;
}

[C2am]

A, padre de <div class="news"> agregale el overflow que te ha señalado pzin.
Saludos

En caso de no funcionar, y visto que has puesto dos versiones distintas de lo que estas haciendo, sería mejor que publicaras un enlace para ver en vivo y en directo, o muestres toda la estructura de la imagen, no solo el html de las noticias o "news", porque así vemos donde y como están contenidas esas cajas.

Saludos

[AwG]

Iniciado por C2am

A, padre de <div class="news"> agregale el overflow que te ha señalado pzin.
Saludos

En caso de no funcionar, y visto que has puesto dos versiones distintas de lo que estas haciendo, sería mejor que publicaras un enlace para ver en vivo y en directo, o muestres toda la estructura de la imagen, no solo el html de las noticias o "news", porque así vemos donde y como están contenidas esas cajas.

Saludos

Eso tampoco funciona ahi, sigue cortando el contenido.

Como me pides te pongo la version online:

http://wintercoming.net/Minecraft2/

[C2am]

Tal como lo pensé, la estructura es muy diferente a la que muestras:

Código HTML:

<div class="maincontent">
 
<div class="newsleft">
        
     <div class="news">
                <article>   </article>  <div class="newsfooter"></div>
      </div>
    
        ....    
</div>
 
<div class="newsright">
        
     <div class="news">
                <article>   </article>  <div class="newsfooter"></div>
      </div>
    
    
</div>
 

Tienes un contenedor -> dos columnas y dentro de cada columna las noticias.
Aunque no lo creas es un dato muy importante para brindar una ayuda.

Bien, ahora:
Coloca el overflow, tal como hemos dicho antes, lo que hará que esas columnas flotadas no queden fueran de su contenedor (me refiero a que el contenedor se extienda todo lo necesario para abarcarlas).
Segundo, a esas columnas newsleft y newsright quitale el hight:100%, porque eso hace que tomen el 100% de la altura de la pantalla en este caso.

Saludos y para la próxima coloca el código tal cual lo estás usando

[lilmaster]

Ya he visto el sitio y lo que tienes que hacer es ponerle

a

.newsleft,.newsright{min-height:300px;}