I'm currently tackling a fluid layout challenge, utilizing percentages instead of pixels to achieve it. I've managed to create a fixed heading (#heading) at the top of the page, but now I'm struggling with ensuring that all other elements on the site start right below this heading and don't disappear underneath it as the user scrolls down.
After some research, the only solution I found was to add padding to the top of the main content equal to the height of the heading. However, this method seems more suited for pixel-based designs and doesn't work seamlessly when using percentages across different browser window sizes or resolutions.
Implementing this solution didn't quite solve my issue because when I resize the browser window, the top of the main content still ends up hidden under the heading. Any guidance on how to tackle this would be greatly appreciated.
Here's an example of the browser window at a normal size: image1
And here is the same window decreased in size: image2
HTML:
<div id="wrap">
<div id="heading">
<div id="name">
<img src="logo.svg" width=100%>
</div>
<div id="navbar">
<a href="index.html">HOME</a> <a href="portfolio_start.html">PORTFOLIO</a> <a href="about.html">ABOUT</a><a href="contact.html">CONTACT</a> <a href="resume.html">RESUME</a>
</div>
</div>
<div id="site_content">
<div id="side_panel_portfolio">
<a href="portfolio_illustration.html">Illustration</a><br>
<a href="portfolio_gd.html">Graphic Design</a> <br>
<a href="portfolio_web.html">Web Design</a>
</div>
<div class="divider">
</div>
<div id="mygallery">
<!--(the images)-->
</div>
</div> <!--End of #site_content-->
</div> <!--End of #wrap-->
CSS:
body {height:100%;
font-family: 'Helvetica', sans-serif;
font-weight:lighter;
font-size:1.3vmax;}
#heading{height:14%;
width:100%;
font-family: 'Raleway', sans-serif;
font-weight:300;
background-color:#ffffff;
top:0;
padding-top:0;
padding-left:0;
Padding-right:0;
position:fixed;
z-index:100;}
#site_content{padding-top:6.7%;
z-index:99;
height:100%;}
#side_panel_portfolio{float:left;
padding-left:3%;
position:fixed;}
#mygallery{float:right;
width:79%;
padding-right:%;
padding-left:3%;}
#portfolio_start{padding-left:18%;}
.divider{position:fixed;
left:15%;
top:14.7%;
bottom:40%;
border-left:1px solid black;}
In essence, I aim to have #site_content positioned just below #heading, with #mygallery being the only scrolling element. Appreciate your help in advance!
*I'd like to clarify that I'm temporarily using another artist's work as placeholders for development purposes only. The website is not live and will not contain these images upon completion.