Foros del Web » Creando para Internet » CSS »

texto no se ajusta a div

Estas en el tema de texto no se ajusta a div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/06/2011, 14:52
 
Fecha de Ingreso: junio-2011
Ubicación: Asturias
Mensajes: 228
Antigüedad: 5 años, 9 meses
Puntos: 14
texto no se ajusta a div

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
  #2 (permalink)  
Antiguo 05/06/2011, 15:05
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 6 años, 3 meses
Puntos: 13
Respuesta: texto no se ajusta a div

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.
  #3 (permalink)  
Antiguo 05/06/2011, 15:14
 
Fecha de Ingreso: junio-2011
Ubicación: Asturias
Mensajes: 228
Antigüedad: 5 años, 9 meses
Puntos: 14
Respuesta: texto no se ajusta a div

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;
}
  #4 (permalink)  
Antiguo 05/06/2011, 15:30
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 9 meses
Puntos: 1010
Respuesta: texto no se ajusta a div

te da igual usar unidades relativas que absolutas, pero has de usar max-width: unidad
  #5 (permalink)  
Antiguo 05/06/2011, 15:38
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 6 años, 3 meses
Puntos: 13
Respuesta: texto no se ajusta a div

Pruebalo y mira como queda.
Código HTML:
Ver original
  1. <div id="wrapper">
  2.     <div id="all-content">
  3.         <div id="content1">
  4.             <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>
  5.         </div>
  6.  
  7.         <div id="content1">
  8.             <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>
  9.         </div>
  10.  
  11.         <div id="content1">
  12.             <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>
  13.         </div>
  14.  
  15.         <div id="content1">
  16.             <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>
  17.         </div>
  18.  
  19.         <div id="content1">
  20.             <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>
  21.         </div>
  22.    
  23.     <div class="clear"></div>
  24.  
  25.     </div>
  26. </div>

Código CSS:
Ver original
  1. html, body {
  2.     height: 100%;
  3.     margin: 0px 0px 0px 0px;
  4.     padding: 0px 0px 0px 0px;
  5. }
  6.  
  7. #wrapper {
  8.     width: 1200px;
  9.     height: 100%;
  10.     margin: 0px auto;
  11. }
  12.  
  13. #all-content {
  14.     width: 1200px;
  15.     background-color: #d8d8d8;
  16.     border: 1px solid;
  17. }
  18.  
  19. #content1 {
  20.     float: left;
  21.     width: 240px;
  22. }
  23.  
  24. .clear {
  25.     clear: both;
  26. }

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.
  #6 (permalink)  
Antiguo 05/06/2011, 23:18
 
Fecha de Ingreso: junio-2011
Ubicación: Asturias
Mensajes: 228
Antigüedad: 5 años, 9 meses
Puntos: 14
Respuesta: texto no se ajusta a div

gracias, lo voy a probar
  #7 (permalink)  
Antiguo 06/06/2011, 05:30
 
Fecha de Ingreso: junio-2011
Ubicación: Asturias
Mensajes: 228
Antigüedad: 5 años, 9 meses
Puntos: 14
Respuesta: texto no se ajusta a div

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
  #8 (permalink)  
Antiguo 06/06/2011, 06:36
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 6 años, 3 meses
Puntos: 13
Respuesta: texto no se ajusta a div

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

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:50.