Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] No cuadran porcentajes de los width

Estas en el tema de No cuadran porcentajes de los width en el foro de CSS en Foros del Web. Hola algo se me escapa respecto a los porcentajes de los width de los divs.. Primero he creado un div con un width del 80% ...
  #1 (permalink)  
Antiguo 26/05/2016, 10:25
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 11 años, 5 meses
Puntos: 468
No cuadran porcentajes de los width

Hola algo se me escapa respecto a los porcentajes de los width de los divs..

Primero he creado un div con un width del 80% en el que coloco toda la página.
Luego dentro del anterior creo un header con un width del 100%
Abajo coloco dos columnas con un float left, una de un width 17% a la izquierda con un margin-right de 10px y la otra columna e la cual empiezan mis problemas.

Si a la columna de la derecha le pongo un width superior al 74%, se descuadra y la columna pasa a la linea inferior, es decir, se traspasa abajo.

¿Esto no tendría que ocurrir cuando el width total sobrepase el 100%?

17%de la primera columna + 10px del margin de esa columna + 75% de la segunda columna suman un width de 92-93% como mucho, el cual por supuesto no cuadra con el width del header que es un 100%

No s si me seguís. ¿ Alguien sabe que podría estar pasando ?

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="UTF-8">
  4.     <title>Document</title>
  5.     <meta name="viewport" content="widht=device-width"/>
  6.     <link rel="stylesheet" href="style.css"/>
  7.     <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  8.  
  9. </head>
  10.     <div id="principal">
  11.         <header>
  12.             <h1>Rodry responsive</h1>
  13.             <h2>Web de pruebas de diseño css por el tito Rodry.</h2>
  14.             <div id="menu">
  15.                 <p>Esto es una prueba para el menu principal</p>
  16.             </div>
  17.            
  18.         </header>
  19.         <section>
  20.             <article id="columna1">
  21.                 <header>
  22.                     <h2>Enlaces</h2>
  23.                 </header>
  24.                 <ul>
  25.                     <li>Juegos</li>
  26.                     <li>Noticias</li>
  27.                     <li>Horóscopo</li>
  28.                     <li>Libros</li>
  29.                     <li>Programación</li>
  30.                     <li>Tutoriales</li>
  31.                 </ul>
  32.             </article>
  33.             <article id="columna2">
  34.                 <div id="contenedor">
  35.                     <img src="http://wallpapers.org.es/wp-content/uploads/2012/11/fondo-degradado-1024x640.jpg" alt="">
  36.                     <p>Pie de página para ponerlo con position</p>
  37.                 </div>
  38.                
  39.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quisquam odio iusto tenetur, repudiandae aut, esse, at enim voluptatum nostrum laudantium deserunt similique nisi doloremque ipsum omnis rerum ullam sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non impedit error, earum eos voluptatibus, ad deleniti corporis libero quam similique voluptas quis saepe voluptatum, ullam iusto et dolorem quos iure.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est at recusandae architecto ducimus eaque vel neque facilis id, non numquam ad repudiandae ipsam, repellendus, sint sapiente. Consectetur et quaerat sed? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quisquam odio iusto tenetur, repudiandae aut, esse, at enim voluptatum nostrum laudantium deserunt similique nisi doloremque ipsum omnis rerum ullam sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non impedit error, earum eos voluptatibus, ad deleniti corporis libero quam similique voluptas quis saepe voluptatum, ullam iusto et dolorem quos iure.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur et quaerat sed?</p>
  40.             </article>
  41.             <article id="columna3">
  42.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione fuga pariatur magni vitae veniam dolor, rem maiores odio repellendus cupiditate totam tenetur ipsum adipisci! Cumque alias expedita eum ea animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid rem in ducimus voluptatibus facilis blanditiis quod aliquam explicabo laboriosam perspiciatis consequatur doloremque deleniti distinctio optio debitis ut corrupti, omnis obcaecati?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nam ipsa atque vero omnis et molestias molestiae beatae, dicta? Molestias obcaecati veritatis, ex nemo accusamus distinctio eos quaerat molestiae mollitia.</p>
  43.             </article>
  44.         </section>
  45.     </div>
  46.    
  47. </body>
  48. </html>

Código CSS:
Ver original
  1. body {
  2.     margin-top: 20px;
  3.     font-family: 'Lato', sans-serif;
  4.     font-size: 1.1em;
  5. }
  6.  
  7. #principal {
  8.     margin: 0 auto;
  9.     width: 80%;
  10. }
  11.  
  12. h1 {
  13.     margin: 0 auto;
  14.     margin-top: 10px;
  15.     margin-bottom: 10px;
  16.     font-size: 46px;
  17. }
  18.  
  19. h2 {
  20.     color: #A3949C;
  21.     margin: -10px 0 10px; 0;
  22.     font-size: 20px;
  23. }
  24.  
  25. header #menu p {
  26.     width: 100%;
  27.     margin-top: -12px;
  28.     margin-bottom: -12px;
  29.     text-align: center;
  30.     font-size: 25px;
  31.  
  32. }
  33.  
  34. #contenedor img {
  35.     width: 100%;
  36. }
  37.  
  38. #menu {
  39.         width: 100%;
  40. }
  41.  
  42. #columna1, #columna2, #columna3, #menu {
  43.     margin: 0 auto;
  44.     background-color: #FFF3AE;
  45.     border: solid 1px #EACA3B;
  46.     border-radius: 2px;
  47.     padding: 20px;
  48.     margin-bottom: 10px;
  49. }
  50.  
  51. #columna1, #columna3 {
  52.     float: left;
  53.  
  54. }
  55.  
  56.  
  57.  
  58. #columna1, #columna3 {
  59.     width: 17%;
  60.     margin-right: 10px;
  61. }
  62.  
  63. #columna2 {
  64.     float: right;
  65.     width: 75%;
  66. }
__________________
No te olvides de dar +1 a quien te echa un cable ;)

Última edición por rodrypaladin; 26/05/2016 a las 12:57
  #2 (permalink)  
Antiguo 26/05/2016, 13:44
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.027
Antigüedad: 18 años, 6 meses
Puntos: 1826
Respuesta: No cuadran porcentajes de los width

Estoy viendo, pero por lo pronto.

1) Usa calc, es una maravilla.

width: calc(20%+20px); < This is awsome!

2) A ver si no te está afectando el modelo de caja, yo de plano lo reseteo a border-box: http://quirksmode.org/css/user-interface/boxsizing.html

3) También en lugar de usar float, uso flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Editado. Sí, efectivamente. agrega el box model box-sizing: border-box a todas las columnas, de hecho yo lo pongo a todo, así que tal vez un reset al inicio

Código CSS:
Ver original
  1. *{box-sizing: border-box}

Última edición por Rafael; 26/05/2016 a las 13:51
  #3 (permalink)  
Antiguo 26/05/2016, 13:56
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.027
Antigüedad: 18 años, 6 meses
Puntos: 1826
Respuesta: No cuadran porcentajes de los width

Ando preparando un framweork propio, para un html más puro

pero dentro de otras cosas no uso un div wraper como tu id principal, sino estoy usando de plano solamente como envoltorios 3 etiquetas.

Código HTML:
Ver original
  1.    <header></header>
  2.    <main></main>
  3.    <footer></footer>
  4. </body>

Y con que ponga
Código CSS:
Ver original
  1. header, main, footer {width: 80%;}
tengo lo mismo que un wrapper, incluso para cosas como sticky footer.

A pesar de que main no está muy reconocida funciona bien si simplemente le pones los estilos que necesitas.
  #4 (permalink)  
Antiguo 27/05/2016, 07:36
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 11 años, 5 meses
Puntos: 468
Respuesta: No cuadran porcentajes de los width

Gracias @Rafael, tu solución del box-sizing me funcionó, solamente ahora cuando reduzco la resolucion a 1124x se descuadra la columna2

No acostumbro a hacer como hice de poner un div que englobe todo, solo estaba probando a la desesperada con los width que no me encajaba, buscaré sobre el box-sizing, ya que no se que es ni que hace exactamente.

Gracias de nuevo

Edito: He reducido el % de las columnas laterales izquieras, y al reducir la resolución ya no ocurre, se ve que esos px, de los margenes afectan bastante al total.
__________________
No te olvides de dar +1 a quien te echa un cable ;)

Última edición por rodrypaladin; 27/05/2016 a las 07:44
  #5 (permalink)  
Antiguo 28/05/2016, 03:33
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.027
Antigüedad: 18 años, 6 meses
Puntos: 1826
Respuesta: No cuadran porcentajes de los width

Pero combina el calc. Es una maravilla porque no deja lugar a dudas cuanto mide en "porcentaje", unos pixeles.

El calc es bastante exacto.
  #6 (permalink)  
Antiguo 28/05/2016, 04:36
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 11 años, 5 meses
Puntos: 468
Respuesta: No cuadran porcentajes de los width

Tengo dudas respecto donde tengo que usar calc, ya que lo pongo por ejemplo en el contenedor padre quedando un 90%+20px

pero los de dentro tengo en una caja 40% con margen derecho de 20px y en otra 50% , sumando lo mismo, pero no cuadra
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #7 (permalink)  
Antiguo 28/05/2016, 07:42
 
Fecha de Ingreso: julio-2013
Mensajes: 14
Antigüedad: 8 años, 2 meses
Puntos: 3
Respuesta: No cuadran porcentajes de los width

Cita:
Iniciado por rodrypaladin Ver Mensaje
Tengo dudas respecto donde tengo que usar calc, ya que lo pongo por ejemplo en el contenedor padre quedando un 90%+20px

pero los de dentro tengo en una caja 40% con margen derecho de 20px y en otra 50% , sumando lo mismo, pero no cuadra
Entonces has algo simple trabaja tus margenes con porcentajes tambien, asi sabras cuando te da 100% y el box-sizing en ese caso funcionaría mucho mejor
  #8 (permalink)  
Antiguo 28/05/2016, 15:37
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 11 años, 5 meses
Puntos: 468
Respuesta: No cuadran porcentajes de los width

pero cuando agrando o disminuyo el navegador, ese 1% por ejemplo de margen, se agranda o se disminuye y ya no lleva el mismo aspecto
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #9 (permalink)  
Antiguo 28/05/2016, 18:49
 
Fecha de Ingreso: julio-2013
Mensajes: 14
Antigüedad: 8 años, 2 meses
Puntos: 3
Respuesta: No cuadran porcentajes de los width

Mhmmm en eso tienes mucha razón, en ese caso te prepare un ejemplo de la propiedad calc()...

http://codepen.io/BeikerxD/pen/zBYdKZ

Espero te sirve para despejar dudas de donde aplicarlo...

Última edición por BeikerxD; 28/05/2016 a las 18:50 Razón: sigo teniendo problemas con las url :/
  #10 (permalink)  
Antiguo 29/05/2016, 11:56
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 11 años, 5 meses
Puntos: 468
Respuesta: No cuadran porcentajes de los width

En cuanto llegue a casa lo pruebo, por cierto estoy vieneo ahora flexbox por recomendaciones anteriores, puedo usarlo sin problemas tambien con el ?
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #11 (permalink)  
Antiguo 29/05/2016, 13:28
 
Fecha de Ingreso: julio-2013
Mensajes: 14
Antigüedad: 8 años, 2 meses
Puntos: 3
Respuesta: No cuadran porcentajes de los width

Bueno cuando mencionaron flexbox me dio curiosidad y allí mire la pagina que dejo Rafael y es una verdadera pasada, pero segun leí aqui... [URL]https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS[/URL] en elementos flexibles no se usa ni clear ni float porque no tiene sentido, el flexbox hace el trabajo.

Y ademas de eso funciona perfectarmento con cal() y las propiedas min-width para trabajar con porcentajes.
  #12 (permalink)  
Antiguo 29/05/2016, 15:35
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 11 años, 5 meses
Puntos: 468
Respuesta: No cuadran porcentajes de los width

En cuanto lo mencionó Rafael me puse a investigarlo y mas o menos ya me he quedado con la copla ( o eso creo ) pero me seguía pasando lo de los margenes, voy a probar con tu ejemplo a ver que tal
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #13 (permalink)  
Antiguo 29/05/2016, 16:25
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 11 años, 5 meses
Puntos: 468
Respuesta: No cuadran porcentajes de los width

Doy el tema por solucionado ya que he logrado lo que pretendía con calc() ;)
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #14 (permalink)  
Antiguo 30/05/2016, 01:42
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.027
Antigüedad: 18 años, 6 meses
Puntos: 1826
Respuesta: No cuadran porcentajes de los width

Qué bueno.

La combinación border-box, con calc y flexbox me encanta. Los float ya los uso casi sólamente para cuando quiero que el texto fluya, pero no tanto con bloques.

Etiquetas: background, color, float, html, porcentajes, responsive, width
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:08.