CODEWITHSUNDEEP
csshtml
dutraveller
dutraveller

Reputation: 327

Position a div outside the wrapper but on top of it

I'm trying to position a div that contains a logo (the one in orange, see image) on top of the wrapper div, but a little outside of it.

I've tried with absolute position, but every time I resize the browser (for example to 800x600), the wrapper div moves around.

Here is the code, and an image for help to understand what I'm trying to explain:

<style type="text/css">
   #wrapper{width:958px; margin: 0 auto -47px;min-height:950px;}
   #content {
   background-color:#306;
   width:100%; 
   overflow: auto;
   min-height:650px;
   }
   #imagem{position:absolute;top:0;padding-left:200px;width:451px;height:108px;}
</style>
</head>

<body>

  <div id="imagem"><img src="logo.png" /></div>

    <div id="wrapper">
<div id="content">
     <p>teste</p>
     </div>
    </div>
  </body>

Upvotes: 1

Views: 4565

Answers (1)

cletus
cletus

Reputation: 625087

Try using negative margins instead:

#imagem { margin-left: -50px; }

This should be put inside the wrapper instead of outside it. It'll solve the problems of things overlapping it.

Upvotes: 4

Related Questions