Max Wilson Max Wilson - 5 months ago 12
CSS Question

Side banner on a webpage

How would I make it so the banners along the top and bottom of this page (http://i.imgur.com/SxjbCJV.jpg) 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>




Thanks in advance!
Max

Answer

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;
}

enter image description here