My goal is to create a webpage layout with a fixed header, footer, sidebar, and right column containing ads, while allowing the content to be scrollable. I attempted to achieve this by placing the header and footer outside of the flexbox, and using a wrapper for the middle page with flexbox for the 3 columns. I utilized the sticky property for the header and the fixed property for the sidebar. However, I am encountering the issue of the sidebar overlapping the footer, and I'm unsure of the cause. These are the challenges I am currently facing.
- There is an extra gap on the right side of the page horizontally after the content ends. Despite setting the width of the entire HTML body to 100%, the gap persists.
- The fixed sidebar is overlapping with the footer. I attempted to address this by adjusting the height using calc, but it did not resolve the issue.
- The ad column is scrolling after reaching the bottom, even though I used the sticky property. Ideally, it should remain fixed, right?
- Moreover, when I decrease the window size horizontally, the right column disappears while the middle, header, and main content adjusts. I tried setting the width of the wrapper to 100%, but the right column still vanishes. I want to find a solution without using the overflow property, and as a newcomer to flexbox, I'm struggling with keeping the columns fixed.
html body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Roboto', sans-serif;
}
#top{
position:sticky;
top:0px;
z-index:1;
}
#header{
width: 100%;
background-color: #32404d;
position: relative;
height: 85px;
}
#header img {
width: 300px;
position: relative;
margin-left: 30px;
top: 50%;
transform: translateY(-50%);
}
#header p {
float: right;
position: relative;
margin-right: 30px;
top: 50%;
transform: translateY(-125%);
color: #dfe9ed;
font-weight: 600;
}
.wrapper{
display: flex;
flex-direction: row;
}
#nav {
height: calc(100vh - 90px);
width: 200px;
background:#4b5c6e;
position:fixed;
}
.maincontent{
margin-left: 200px;
position: sticky;
top: 85px;
padding-left: 30px;
margin-right: 30px;
font-size: 15px;
font-weight: 400;
color: #343e47
}
#heading{
color:#4b5c6e;
width: 465px;
border-bottom: 2.8px solid #313c47;
font-size: 45px;
margin-top: 20px;
margin-bottom: 20px;
line-height: 1.1;
font-weight: 500
}
#right{
width: 180px;
height: calc(100vh - 90px);
position: sticky;
top:85px;
}
.ad{
padding-top: 20px;
background-color: #eaf2fa;
}
#htmlimg{
padding-left: 20px;
padding-top: 10px;
}
#footer-wrapper{
width: 100%;
}
#footer {
font-size: small;
padding: 0.3em;
height: 40px;
color:white;
background: #32404e;
margin-bottom: 0px;
}
#footer p{
float:right;
position: relative;
top: 0px;
right: 40px;
margin-left: 500px;
margin-bottom: 0px;
}<body>
<header id="top">
<div id="header">
<img src="./images/logo1.svg " alt="logo" />
<p >Welcome Tello</p>
</div>
</header>
<div class="wrapper">
<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Process</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<div class="maincontent">
<p id="heading">Welcome to company</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu arcu quis lorem
</p>
<p>Praesent volutpat tincidunt odio eu laoreet. Nullam pellentesque gravida leo, elementum
volutpat.</p>
</div>
<div id="right">
<div class="ad">
<img id="htmlimg" src="./images/html-5.svg " alt="logo" />
<img id="cssimg" src="./images/css3.svg " alt="logo" />
</div>
</div>
</div>
<div id="footer-wrapper">
<footer id="footer"><p>© Tello inc.</p></footer>
</div>
</body>/html>