¿Cómo harías que dos s se superpongan?

Necesito dos divs que se vean un poco como esto: 

    |               |
 ---|    LOGO       |------------------------
|   |_______________|  LINKS                |
|             CONTENT                       |

¿Cuál es la forma más ordenada/elegante de hacer que se superpongan perfectamente? El logotipo tendrá una altura y un ancho fijos y tocará el borde superior de la página.

Author: Christopher Bottoms, 2008-11-07
Source

5 answers

Podría abordarlo de esta manera (CSS y HTML): 

html,
body {
  margin: 0px;
}
#logo {
  position: absolute; // Reposition logo from the natural layout
  left: 75px;
  top: 0px;
  width: 300px;
  height: 200px;
  z-index: 2;
}
#content {
  margin-top: 100px; // Provide buffer for logo
}
#links {
  height: 75px;
  margin-left: 400px; // Flush links (with a 25px "padding") right of logo
}
<div id="logo">
  <img src="http://www.skrenta.com/images/stackoverflow.jpg" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>
 73
Author: Owen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-29 16:57:17

Simplemente use márgenes negativos, en el segundo div diga: 

<div style="margin-top: -25px;">

Y asegúrese de establecer la propiedad z-index para obtener la estratificación que desea.

 65
Author: TravisO,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-05 11:06:52

Con posicionamiento absoluto o relativo, puede hacer todo tipo de superposición. Probablemente quieras que el logotipo se diseñe como tal:

div#logo {
  position: absolute;
  left: 100px; // or whatever
}

Nota: la posición absoluta tiene sus excentricidades. Probablemente tendrás que experimentar un poco, pero no debería ser demasiado difícil hacer lo que quieres.

 3
Author: sblundy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-06 22:13:11

Usando CSS, se establece el div del logotipo en la posición absoluta, y se establece el orden z por encima del segundo div.

#logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}
 1
Author: FlySwat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-06 22:04:46

Si quieres que el logotipo tome espacio, probablemente sea mejor flotarlo a la izquierda y luego moverse hacia abajo en el contenido usando margin, algo así: 

#logo {
    float: left;
    margin: 0 10px 10px 20px;
}

#content {
    margin: 10px 0 0 10px;
}

O cualquier margen que desee.

 1
Author: jishi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-06 22:54:59