How would you make two

s overlap?

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 Answers

Just use negative margins, in the second div say:

<div> 

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

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> <img src="" /> </div> <div> <div>dssdfsdfsdfsdf</div> </div>

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.

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

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.