166

I need two divs to look a bit like this: 

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

What's the neatest/most elegant way of making them overlap neatly? The logo will have a fixed height and width and will be touching the top edge of the page.

5 Answers5

112

Just use negative margins, in the second div say:

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

And make sure to set the z-index property to get the layering you want.

Community
  • 1
  • 1
TravisO
  • 9,406
  • 4
  • 36
  • 44
  • 9
    This is by far the simplest method, and can easily be adapted for overlapping footers by using margin-bottom on the content of a page. Thanks! – Peter DeWeese Mar 02 '12 at 16:29
  • 1
    this solution seems to depend on DOCTYPE, doesn't it? because it didn't work with HTML5 DOCTYPE when I tried. – alumi Aug 12 '13 at 17:22
  • 2
    This should be the accepted answer, position absolute tends to cause problems. – Dmitriy Nov 30 '18 at 15:02
  • It's not possible to use z-index without set position to something different that static. Unfortunately, this answer not let you choose the z-order. – Hugo Delannoy Nov 13 '20 at 16:45
  • This is the simplest and clean solution. Love it:) – Alston Nov 27 '22 at 09:41
95

I might approach it like so (CSS and 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="https://via.placeholder.com/200x100" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>
randers
  • 5,031
  • 5
  • 37
  • 64
Owen
  • 82,995
  • 21
  • 120
  • 115
  • 2
    is there any way to make content just avoid the space used by the logo? – Javier Nov 06 '08 at 22:22
  • 1
    hmm can you clarify? i take that to mean you just want the logo above the content? if so that's just a normal flow of divs (so remove left, top, position from #logo). i have a feeling you mean something else though! :) – Owen Nov 06 '08 at 22:36
  • 2
    I think what was meant was to have the content (text) wrap around the logo – Davy8 Nov 06 '08 at 22:56
  • 2
    ah hmm, i'm pretty sure not. the problem being an element can be floated, or positioned, but not both. until they develop some sort of float: center idea... – Owen Nov 06 '08 at 23:47
6

With absolute or relative positioning, you can do all sorts of overlapping. You've probably want the logo to be styled as such:

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

Note: absolute position has its eccentricities. You'll probably have to experiment a little, but it shouldn't be too hard to do what you want.

sblundy
  • 60,628
  • 22
  • 121
  • 123
  • 1
    Would that cause the logo to overlap the text where links is though? Or would it push the links over to the side? –  Nov 06 '08 at 22:06
  • 1
    No, absolute effectively removes the tag from the flow. It would be as if it weren't there. – sblundy Nov 06 '08 at 22:11
2

Using CSS, you set the logo div to position absolute, and set the z-order to be above the second div.

#logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}
FlySwat
  • 172,459
  • 74
  • 246
  • 311
1

If you want the logo to take space, you are probably better of floating it left and then moving down the content using margin, sort of like this:

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

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

or whatever margin you want.

jishi
  • 24,126
  • 6
  • 49
  • 75