I'm trying to set up a page with a fixed header that varies in size when the browser window changes (let's say from a pc to a mobile phone). So far I got it to work fine, but now I have content I want to place underneath it and I don't want to set it on a fixed margin (because then the header will cover the top of the content when it jumps into two lines).

Is there a way to do this using html/css? 

Another way to do this would probably be to set up a placeholding element, but same problem as before, how do you resize it according to the header size?

here's my code

```css
.header{
    position:fixed;
    width:70%;
    margin-left:15%;
    margin-right:15%;
    height:3em;
    text-align:center;
}
/* logo positioning */
#logo{
    display:inline-block;
}
/* napis na headerju */
#headersign{
    display:inline-block;
    vertical-align:top;
    font-weight:bold;
    font-size:160%;
}
/* top menubar */
#topmenu {
    background-color:#009933;
    color:#ffffff;
    font-family:verdana;
    width:100%;
    height:100%;
}
/* text menubar */
.menutext {
    font-family:verdana;
    color:#ffffff;
}
.menutext:hover {
    color:#cccccc;
}
/* text position menubar */
#linkijs{
   float:left;
   display:inline;
   margin-left:1%;
}
#linkeng{
   float:right;
   display:inline;
   margin-right:1%;
}
/* podatki o knjižnici */
#leftpanel {
    /*positioning*/
    top:0;
    margin-left:15%;
    background-color:#00cc66;
}
```

```html
    <body>
        <div class="header">
            <img id="logo" src="images/ijs_logo.gif" alt="logo" />
            <p id="headersign">ZNANSTVENO INFORMACIJSKI CENTER</p>
            <div id="topmenu">
                <a href="http://www.ijs.si/"><p class="menutext" id="linkijs">IJS</p></a>
                <a href="indexEN.html"><p class ="menutext" id="linkeng">ENGLISH</p></a>
            </div>
        </div>
        <div id="leftpanel">
            <p>
                Institut Jožef Štefan <br />Knjižnica <br/>Jamova 39 <br/>1000 Ljubljana <br/><br/>tel: +386 1 47 73 304 <br/>fax: +386 1 47 73 152 <br/><br/>Delovni čas:<br/>pon-čet: 8:00-17:30<br/>pet: 8:00-17:00
            </p>
        </div>
        <div id="rightpanel">

        </div>
    </body>
```

hope I didn't miss a similar post, been trying hard to find a solution whole morning