texto no se ajusta a div

[javierflti]

hola, tengo un problemita con un css que me está volviendo loco, y seguro que es una tontería.

tengo esto
<div class="destacados">
<br>
<br>
<div class="destacados_partes"><span>texto largo para saber si se sale del div o no</span>
</div>
</div>

tengo la clase destacados, que es de unos 1200 px
y tengo la clase destacados_partes, con ancho 20%
Quiero que al escribir dentro de un div con la clase destacados_partes , solo me escriba el 20% de esos 1200 px para así poder poner 5 clases de esas dentro del div de 1200 px, pero en lugar de ello, pasa por encima del div y sige escribiendo.

He leido que igual se solucionaba poniendo esto
<div style="clear: both;"></div>
quedando así

<div class="destacados">
<br>
<br>
<div class="destacados_partes"><span>texto largo para saber si se sale del div o no</span>
<div style="clear: both;"></div>
</div>
</div>

pero no funciona.
alguna idea?
Gracias de antemano

[Ventru3]

Si no es imprescindible es mejor que no trabajes con porcentajes. Si sabes que en un div de ancho 1200px quieres hacer 5 divs del 20% del tamaño del primero lo puede calcular.

1200 x 20 / 100 = 240px por div.

En este caso con dividirlo por 5 ya hubiera estado porque 5 veces el 20% da un 100% xd.

De todas maneras si lo quieres seguir haciendo con porcentajes pon tu CSS para ver que atributos tienen los divs en cuestión.

[javierflti]

me da igual trabajar con porcentajes o con px, si así se soluciona.
Este es uno

.destacados {
background: url(images/destacados.gif) #ffffff no-repeat top;
color: #000000;
border: 1px solid $4874a3;
}

y este el otro
.destacados_partes {
width: 200 px;
margin: 0px 0px 0px 0px;
}

[IsaBelM]

te da igual usar unidades relativas que absolutas, pero has de usar max-width: unidad

[Ventru3]

Pruebalo y mira como queda.

Código HTML:

<div id="wrapper">
    <div id="all-content">
        <div id="content1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula. Aenean urna ligula, bibendum at tincidunt ac, pharetra vel mi. Morbi id mi nisi. Fusce metus nibh, sagittis id faucibus a, feugiat gravida felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at consectetur enim. Pellentesque elementum sem elit. Maecenas ultrices ipsum id libero lobortis mattis. Donec et lectus ut metus vulputate rutrum. Integer porttitor pharetra commodo. Donec dui lacus, dignissim id sollicitudin sed, rhoncus quis arcu. Ut lacinia velit eu odio hendrerit luctus. Morbi sodales congue aliquam. Donec vel magna nisi. Ut feugiat malesuada posuere. Integer aliquet tincidunt placerat.</p>
        </div>
 
        <div id="content1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula. Aenean urna ligula, bibendum at tincidunt ac, pharetra vel mi. Morbi id mi nisi. Fusce metus nibh, sagittis id faucibus a, feugiat gravida felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at consectetur enim. Pellentesque elementum sem elit. Maecenas ultrices ipsum id libero lobortis mattis. Donec et lectus ut metus vulputate rutrum. Integer porttitor pharetra commodo. Donec dui lacus, dignissim id sollicitudin sed, rhoncus quis arcu. Ut lacinia velit eu odio hendrerit luctus. Morbi sodales congue aliquam. Donec vel magna nisi. Ut feugiat malesuada posuere. Integer aliquet tincidunt placerat.</p>
        </div>
 
        <div id="content1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula. Aenean urna ligula, bibendum at tincidunt ac, pharetra vel mi. Morbi id mi nisi. Fusce metus nibh, sagittis id faucibus a, feugiat gravida felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at consectetur enim. Pellentesque elementum sem elit. Maecenas ultrices ipsum id libero lobortis mattis. Donec et lectus ut metus vulputate rutrum. Integer porttitor pharetra commodo. Donec dui lacus, dignissim id sollicitudin sed, rhoncus quis arcu. Ut lacinia velit eu odio hendrerit luctus. Morbi sodales congue aliquam. Donec vel magna nisi. Ut feugiat malesuada posuere. Integer aliquet tincidunt placerat.</p>
        </div>
 
        <div id="content1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula. Aenean urna ligula, bibendum at tincidunt ac, pharetra vel mi. Morbi id mi nisi. Fusce metus nibh, sagittis id faucibus a, feugiat gravida felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at consectetur enim. Pellentesque elementum sem elit. Maecenas ultrices ipsum id libero lobortis mattis. Donec et lectus ut metus vulputate rutrum. Integer porttitor pharetra commodo. Donec dui lacus, dignissim id sollicitudin sed, rhoncus quis arcu. Ut lacinia velit eu odio hendrerit luctus. Morbi sodales congue aliquam. Donec vel magna nisi. Ut feugiat malesuada posuere. Integer aliquet tincidunt placerat.</p>
        </div>
 
        <div id="content1">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at adipiscing eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus vulputate tortor ac nulla condimentum fermentum. Nunc convallis dignissim mauris, et viverra metus bibendum eget. Phasellus ultricies placerat vehicula. Aenean urna ligula, bibendum at tincidunt ac, pharetra vel mi. Morbi id mi nisi. Fusce metus nibh, sagittis id faucibus a, feugiat gravida felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at consectetur enim. Pellentesque elementum sem elit. Maecenas ultrices ipsum id libero lobortis mattis. Donec et lectus ut metus vulputate rutrum. Integer porttitor pharetra commodo. Donec dui lacus, dignissim id sollicitudin sed, rhoncus quis arcu. Ut lacinia velit eu odio hendrerit luctus. Morbi sodales congue aliquam. Donec vel magna nisi. Ut feugiat malesuada posuere. Integer aliquet tincidunt placerat.</p>
        </div>
    
    <div class="clear"></div>
 
    </div>
</div>
 

Código CSS:

html, body {
    height: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
 
#wrapper {
    width: 1200px;
    height: 100%;
    margin: 0px auto;
}
 
#all-content {
    width: 1200px;
    background-color: #d8d8d8;
    border: 1px solid;
}
 
#content1 {
    float: left;
    width: 240px;
}
 
.clear {
    clear: both;
}
 

Si al content1 (en tu caso destacados_partes) le añades bordes, el width debera ser inferior porque el borde ocupa parte de esos 240px o 20% como quieras.

[javierflti]

gracias, lo voy a probar

[javierflti]

Muchísimas gracias a todos, sois una gran comunidad. Me respondéis las dudas en solo unas horas.
He probado con la solución de Ventru3 y me ha funcionado perfectamente.

Solo por curiosidad ¿qué tenía mal yo?
solo me he fijado que si pones px separado del número no funciona, pero más nada.
Un saludo

[Ventru3]

Te faltaba el float: left para que después del primer content1 el siguiente no saliera abajo, sino a la izquierda.