I need to create a HTML page that is composed of two main parts: a fixed header part (a selection bar) and a second part that displays some text. I have tryed the code below, but as I am new to CSS this doesn't work as I wanted to:

```
9 <style type=\"text/css\">
 10 #header {
 11     position:fixed;
 12     top:0px;
 13     margin:auto;
 14     width: 100%;
 15     background:#F0F0F0;
 16 }
 17 #content {
 18     position:absolute;
 19     top:90px;
 20 }
 21 </style>
 22 </head>
 23
 24 <body>
 25 <div id=header>
 26 <h1> HEADER: Long header................................................................... </h1>
 27 </div>
 28 <div id=content>
 29 <p> Content...</p>
 30 </div>
 31 </body>

```

The "content" part goes under "header" but I am having two issues with this code:

1. when scrolling, the "content" text goes over the "header" text. I
need to hide the scrolled "content" text under the header.
2. when resizing, if the header contains a long text, after resizing that text goes on the next line and this affects the "content" part, which starts at 90px from the top. How can I position my content part so taht it is displayed below the "header" when resizing, but when scrolling goes under.

Thanks in advance for your help!