html - Side banner on a webpage -


how make banners along top , bottom of page (http://i.imgur.com/sxjbcjv.jpg) instead @ both sides of page?

i have them both fixed top , bottom of 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 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

have tried floating header , footer 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


Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -