Question

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.

Answer 1

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>