[SOLUCIONADO] No cuadran porcentajes de los width

rodrypaladin · #1 (**permalink**) 26/05/2016, 10:25

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<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="widht=device-width"/>
    <link rel="stylesheet" href="style.css"/>
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
 
</head>
<body>
    <div id="principal">
        <header>
            <h1>Rodry responsive</h1>
            <h2>Web de pruebas de diseño css por el tito Rodry.</h2>
            <div id="menu">
                <p>Esto es una prueba para el menu principal</p>
            </div>
            
        </header>
        <section>
            <article id="columna1">
                <header>
                    <h2>Enlaces</h2>
                </header>
                <ul>
                    <li>Juegos</li>
                    <li>Noticias</li>
                    <li>Horóscopo</li>
                    <li>Libros</li>
                    <li>Programación</li>
                    <li>Tutoriales</li>
                </ul>
            </article>
            <article id="columna2">
                <div id="contenedor">
                    <img src="http://wallpapers.org.es/wp-content/uploads/2012/11/fondo-degradado-1024x640.jpg" alt="">
                    <p>Pie de página para ponerlo con position</p>
                </div>
                
                <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>
            </article>
            <article id="columna3">
                <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>
            </article>
        </section>
    </div>
    
</body>
</html>

Código CSS:

Ver originalbody {
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-size: 1.1em;
}
 
#principal {
    margin: 0 auto;
    width: 80%;
}
 
h1 {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 46px;
}
 
h2 {
    color: #A3949C;
    margin: -10px 0 10px; 0;
    font-size: 20px;
}
 
header #menu p {
    width: 100%;
    margin-top: -12px;
    margin-bottom: -12px;
    text-align: center;
    font-size: 25px;
 
}
 
#contenedor img {
    width: 100%;
}
 
#menu {
        width: 100%;
}
 
#columna1, #columna2, #columna3, #menu {
    margin: 0 auto;
    background-color: #FFF3AE;
    border: solid 1px #EACA3B;
    border-radius: 2px;
    padding: 20px;
    margin-bottom: 10px;
}
 
#columna1, #columna3 {
    float: left;
 
}
 
 
 
#columna1, #columna3 {
    width: 17%;
    margin-right: 10px;
}
 
#columna2 {
    float: right;
    width: 75%;
}

Rafael · #2 (**permalink**) 26/05/2016, 13:44

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*{box-sizing: border-box}

Rafael · #3 (**permalink**) 26/05/2016, 13:56

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<body>
   <header></header>
   <main></main>
   <footer></footer>
</body>

Y con que ponga

Código CSS:

Ver originalheader, 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.

rodrypaladin · #4 (**permalink**) 27/05/2016, 07:36

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.

Rafael · #5 (**permalink**) 28/05/2016, 03:33

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

El calc es bastante exacto.

rodrypaladin · #6 (**permalink**) 28/05/2016, 04:36

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

BeikerxD · #7 (**permalink**) 28/05/2016, 07:42

Cita:

Iniciado por rodrypaladin

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

rodrypaladin · #8 (**permalink**) 28/05/2016, 15:37

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

BeikerxD · #9 (**permalink**) 28/05/2016, 18:49

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...

rodrypaladin · #10 (**permalink**) 29/05/2016, 11:56

En cuanto llegue a casa lo pruebo, por cierto estoy vieneo ahora flexbox por recomendaciones anteriores, puedo usarlo sin problemas tambien con el ?

BeikerxD · #11 (**permalink**) 29/05/2016, 13:28

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.

rodrypaladin · #12 (**permalink**) 29/05/2016, 15:35

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

rodrypaladin · #13 (**permalink**) 29/05/2016, 16:25

Doy el tema por solucionado ya que he logrado lo que pretendía con calc() ;)

Rafael · #14 (**permalink**) 30/05/2016, 01:42

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.