Side Banner on a Webpage
How Would I Make It So the Banners Along the Top and Bottom of This Page () Are Instead at Both Sides of the Page? I Currently Have Them Both Fixed to the Top...
How would I make it so the banners along the top and bottom of this page () are instead at both sides of the page?
I currently have them both fixed to the top and bottom of the page:
#header {
position: fixed;
top: 0;
width: 100%;
height: 66px;
z-index: 999;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 66px;
z-index: 999;
}
And the HTML:
<body>
<div id="wrapper">
<a href="project.html">
<div id="header">
<button id="next-button" href="project.html"><i class="fa fa-arrow-circle-right fa-4x"></i>
</button>
</div>
</a>
<div id="main">
<div id="splash">
<div id="name">
<h1 class="wow animated flipInX">Max Wilson</h1>
</div>
<div id="profile">
<img src="img/Logo.png" class="wow animated rollIn" data-wow-delay="1s">
</div>
<div id="subtext">
<h2 class="wow animated fadeInUp" data-wow-delay="2s">Aspiring Developer </h2>
</div>
</div>
</div>
</div>
<a href="project.html">
<div id="footer">
<button id="prev-button" href="project.html"><i class="fa fa-arrow-circle-left fa-4x"></i>
</button>
</div>
</a>
2 Answers
Have you tried floating the header and footer to the left?
For example:
#header {
position: relative;
float: left;
width: 50px;
height: 500px;
background-color: #44f;
}
#footer {
position: relative;
float: left;
width: 50px;
height: 500px;
background-color: #44f;
}
#wrapper{ text-align: center;
margin-left: auto;
margin-right: auto;
}
#main{ width: 800px;
float:left;
}
Here's a simple and interesting method: giving the body display: flex and the content flex-grow: 1 so it occupies all the available space and pins the other elements to either side.
<div class="side">
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
</div>
<div id="content">
<p>asdfasdf</p>
</div>
<div class="side">
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
<h3>asdf</h3>
</div>
body {
display: flex;
}
.side, #content {
padding: 10px;
}
.side {
background: blue;
}
#content {
flex-grow: 1;
background: grey;
}
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
