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.
05 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.
4I 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.
2Using 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.
