[SOLUCIONADO] Posicionamiento de divs

jakijem · #1 (**permalink**) 23/11/2015, 09:10

tengo un HTML sencillo con 3 divs, por ejemplo, como esto:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
      <link rel="stylesheet" type="text/css" href="estilospruebacolocaciondivs.css">
</head>
<body>
    <div id="wrapper"> 
        <div id="left">
                <a href="index.html">
                     <img src="Logo_NUEVO_100.png" class="logo" alt="logo"/>
                </a>
        </div>
 
        <div id="right">
        </div>
 
        <div id="center">
        </div>
    </div>
    
</body>
</html>

con esta hoja de estilos:

Código CSS:

Ver original@charset "utf-8";
 
    #wrapper {
        width: 100%;
        height: auto;
    }
 
    #left{
        border: 2px;
        border-color: green;
        border-style: dotted;
        max-width: 25%;
        height: auto;
        float: left;
        margin: 0;
        padding: 0;
        background-color: red;
    }
 
    #right{
        border: 2px;
        border-color: blue;
        border-style: dotted;
        max-width: 25%;
        height: auto;
        float: left;
        margin: 0;
        padding: 0;
        background-color: red;
    }
    #center{
        border: 2px;
        border-color: red;
        border-style: dotted;
        margin: 0 auto;
        background-color: green;
        max-width: 50%;
        height: auto;
    }
    .logo {
        width: 50%;
        height: auto;
        float: left;
        margin: 0;
        background-color: #09BDE4;
    }

Bueno, pues por algun motivo que desconozco, el div que contiene la imagen del logo, aun teniendo margin y padding cero, deja a izquierda y arriba un pequeño espacio, como de 10px

¿Porqué sucede esto? ¿como se puede ajustar un div para que quede pegado a izquierda y arriba (o a donde sea) sin ningun espacio?

xfxstudios · #2 (**permalink**) 23/11/2015, 09:39

la imagen no tiene ningun borde blanco???????

jakijem · #3 (**permalink**) 23/11/2015, 11:13

Cita:

Iniciado por xfxstudios

la imagen no tiene ningun borde blanco???????

no, puedes probar con la imagen que quieras

EDITO: tan fácil como añadir el margin:0 y el padding: 0 a la etiqueta body...

xfxstudios · #4 (**permalink**) 23/11/2015, 15:25

ok no se que quieres hacer alli con la imagen porque no explicas la finalidad de ella asi que no te podria ayudar mas especificamente, si usar tanto css para ello, aqui una muestra y espero sea lo que necesitas, a mi me va sin borde blanco, porque la imagen no lo tiene, asi que no veo porque la tuya si

http://jsfiddle.net/nyw07h7b/

ahora esto de aqui para que, si lo no estas aplicando a un div????

Código CSS:

Ver original.logo {
        width: 50%;
        height: auto;
        float: left;
        margin: 0; /*ESTE DCE AQUI*/
        background-color: #09BDE4; /*ESTE DE AQUI*/
    }

no se da mas detalle de lo que esperas de resultado para poder ayudarte en muestra la imagen para verla