I can't get a div position related to the rest of my website.

Question

I expierencing something strange. Prob it's easy, but my css knowhow stops here.

In the dark part, the middle part with the text in it isn't relative to the rest of the website. I knew that it had something to do with being a div related to an other div. I tried this, but it doesn't work.

http://www.coldcharlie.nl/test2/

This is the css part for the rounded corners part, the strange thing is that I can place the shadow part in the rounded corners container and the shadow is related to the rounded corners part.

I also tried placing the above css in a other container, but that didn't sem to work and wrecked the website.

Can somebody tell me what to do?

.rounded_corners{

background: url(../images/achtergrond_homepage.png); no-repeat left bottom;
display: block;
left: 480px;
top: -730px;
z-index: 100000;
position: relative;
color:#FFF;
padding: 15px;
width: 360px;
height: 440px;

}

<div class="rounded_corners">
        <div><h1> <br />Computerhulp in Friesland </h1>
  </div>
  <p>Is  uw computer stuk? Of werkt uw laptop traag? Met de computerhulp van  Friese Computerservice werkt uw computer of laptop weer snel als  vanouds. <br />
    Friese Computerservice is gevestigd in Leeuwarden, maar is actief in heel Friesland.</p>
  <h2><strong>Goede computerhulp is belangrijk!</strong></h2>
  <p>Een computer of laptop gaat altijd stuk op het moment dat het u niet  uitkomt. Vervelend! Vaak wordt geprobeerd om de storing zelf te  verhelpen. Helaas…. met alle gevolgen dien! Uw computer of laptop is  helemaal niet meer bruikbaar of belangrijke informatie (denk ook aan uw  foto’s!) zijn onvindbaar. Het is dan ook raadzaam om voor reparaties  altijd naar een gespecialiseerd computer reparatiebedrijf te gaan.</p>
  <h2><strong>Ook computerhulp nodig?</strong></h2>
  <p>U wilt weer vertrouwd én snel met uw computer of laptop werken? Neem  dan contact op met Friese Computerservice. Onze kennis is uitstekend,  onze tarieven scherp. Bel of mail ons. Wij helpen u graag!</p>
<div id="shadow"><!--This is the shadow part--></div>
       </div>

Answer 1

You have a div with id="wrap-header" that uses margin: 0 auto ... this means that it will be centered horizontally. It also has position: relative and a lot of stuff inside it with position: absolute. That means the stuff inside wrap-header is positioned based on where wrap-header is, and the position of wrap-header changes as the window is resized due to the centering.

However your black box with text, the div with id=rounded-corners is outside all this stuff, so its position doesn't change with the window size. Consequently, it will be positioned wrong for almost every size of the window.

Either get rid of margin:0 auto on wrap-header, or move more of the content out of wrap-header (it doesn't make sense for a lot of it to be in there, perhaps you have misplaced a closing div tag?) or move rounded-corners up to inside wrap-header so it gets repositioned with the rest.