I am currently working on creating a webpage with a fixed header that needs to adapt in size based on the browser window (for example, from a desktop to a mobile device). While I have been able to achieve this successfully, I now face an issue with placing content underneath it without using fixed margins (as this would cause the header to cover the top of the content when it spans multiple lines).
Is there a way to accomplish this using HTML/CSS?
Another approach could be setting up a placeholder element, but then the challenge remains on how to resize it according to the size of the header.
Below is my code:
.header{
position:fixed;
width:70%;
margin-left:15%;
margin-right:15%;
height:3em;
text-align:center;
}
/* logo positioning */
#logo{
display:inline-block;
}
/* header text styling */
#headersign{
display:inline-block;
vertical-align:top;
font-weight:bold;
font-size:160%;
}
/* top menu bar */
#topmenu {
background-color:#009933;
color:#ffffff;
font-family:verdana;
width:100%;
height:100%;
}
/* menu item text */
.menutext {
font-family:verdana;
color:#ffffff;
}
.menutext:hover {
color:#cccccc;
}
/* text position for menu items */
#linkijs{
float:left;
display:inline;
margin-left:1%;
}
#linkeng{
float:right;
display:inline;
margin-right:1%;
}
/* library information panel */
#leftpanel {
/* positioning */
top:0;
margin-left:15%;
background-color:#00cc66;
} <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>I hope this post isn't redundant, as I have spent all morning searching for a solution.