Foros del Web - Ver Mensaje Individual

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%;
}