title: setting margin-top according to header size? HTML CSS
body: <p>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).</p>
  
  <p>Is there a way to do this using html/css? </p>
  
  <p>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?</p>
  
  <p>here's my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;body&gt;
          &lt;div class="header"&gt;
              &lt;img id="logo" src="images/ijs_logo.gif" alt="logo" /&gt;
              &lt;p id="headersign"&gt;ZNANSTVENO INFORMACIJSKI CENTER&lt;/p&gt;
              &lt;div id="topmenu"&gt;
                  &lt;a href="http://www.ijs.si/"&gt;&lt;p class="menutext" id="linkijs"&gt;IJS&lt;/p&gt;&lt;/a&gt;
                  &lt;a href="indexEN.html"&gt;&lt;p class ="menutext" id="linkeng"&gt;ENGLISH&lt;/p&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="leftpanel"&gt;
              &lt;p&gt;
                  Institut Jožef Štefan &lt;br /&gt;Knjižnica &lt;br/&gt;Jamova 39 &lt;br/&gt;1000 Ljubljana &lt;br/&gt;&lt;br/&gt;tel: +386 1 47 73 304 &lt;br/&gt;fax: +386 1 47 73 152 &lt;br/&gt;&lt;br/&gt;Delovni čas:&lt;br/&gt;pon-čet: 8:00-17:30&lt;br/&gt;pet: 8:00-17:00
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="rightpanel"&gt;
              
          &lt;/div&gt;
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>hope I didn't miss a similar post, been trying hard to find a solution whole morning</p>