How to keep an absolutely positioned element in place when resizing a browser window

Question

I have absolutely positioned text so that it is inside my header image, but I cannot figure out how to make it move outside the header when the browser gets the size. If the browser window is resized to a smaller size, the text moves outside the title bar, but if the browser window is resized to a larger size, the text will move to the right of the header!

The title has a width of 800 pixels and a height of 150 pixels, and it is located in the middle of the browser window.

Here is my HTML code:

<div id="container">
    <div id="header">
        <img src="images/header.jpg" alt="Site Header Image">
        <h1>Our Site</h1>
        <h2>Catchy slogan...</h2>
    </div>
</div>

Here is my CSS code:

body {
    margin: 0px;
    padding: 0px;
}

#header h1 {
    color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 305px;
}

#header h2 {
    color: #FFFFFF;
    position: absolute;
    top: 30px;
    left: 330px;
}

#header img {
    width: 800px;
    height: 150px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

:

• . , #container, #header , body - , , .

• div , #container #header . 800px, , margin: auto:

#header {
  position: relative;
  width: 800px;
  margin: auto;
}

Hide result

Codepen: http://codepen.io/eldarshamukhamedov/pen/dGKJGm

Answer 2

, absolute IF, position:relative

#header {
  width:800px; /* define a width to the header container */
  position:relative; /* see note */
  margin:0 auto; /* centers header horizontally */
}