So I'm updating a local circus website and the footer does not want to stay at the bottom of the page. I don't want it fixed to the bottom of the screen but rather when you scroll to the bottom of the content that's where the footer should be. I'm also trying to use a div to fill the remaining space to the right of the buttons with a semi opaque black background. The site should look like this http://sdrv.ms/18Njjnw but instead it looks like http://sdrv.ms/17PkpdR. Thank you for your help in advance.
<body>
<div id="body">
<a href="index.html" ><img id="logo" src="images/logo.png" alt="circus logo" /></a>
<div id="buttons" >
<div class="opa"><a class="buttons" href="circus.html"> Circus </a></div>
<div id="currentPage" class="opa"> <a class="buttons" href="tickets.html"> Tickets </a></div>
<div class="opa"><a class="buttons" href="performers.html"> Performers </a></div>
<div class="opa"><a class="buttons" href="band.html"> Circus City Band </a></div>
<div class="opa"><a class="buttons" href="festival.html"> Circus City Festival </a></div>
<div class="opa"><a class="buttons" href="calendar.html"> Calendar </a></div>
<div class="opa"><a class="buttons" href="about.html"> About </a></div>
<div class="opa"><a class="buttons" href="forms.html"> Forms </a></div>
</div>
<div id="contentContain" >
<div id="paragraph">
<h1> Order Tickets
</h1>
<p>
Performance Dates
<br />
Family Night:<br />
Friday, July 12, 2013 - 7 p.m.<br />
General admission seating - $5.00<br />
Tickets go on sale the day of show!<br />
<br />
Regular Performances:<br />
Saturday, July 13 - 2 p.m. & 7 p.m. <br />
Sunday, July 14 - 3 p.m. <br />
Monday - Friday, July 15-19 - 7 p.m. <br />
Saturday, July 20 - 2 p.m. & 7 p.m. <br />
<br />
Order Online, at the Box Office, or by calling us at 765.472.3918
rom the barn to the big top, Circus has<br /> been a part of Peru, Indiana for over 100 years. Exp<br />erience a walk through Peru's circus history at the Circus City Museum. This popular Museum, locat<br />ed in the Circus City Center, is filled with photos,<br /> miniatures, displays, and costumes from circus past. The museum is open Monday through Friday, A<br />pril through September from 9 am to 5 pm and October throu<br />gh March 9 am to 4 pm. During circus week enjoy<br /> the many circus wagons displayed outs<br />ide the museum as well as extended hours before and after each circus performance. Admission is by <br />donation only. Group tours can be scheduled<br /> by contacting the Circus office at 765-472-3918.
Monetary and ar<br />tifact donations are accepte<br />d and greatly appreciated.
For monetary donations se<br />nd check or Mon<br />ey order to:
Circus City Museum
C/O Circus City Fest<br />ival Inc.
154 N. Broadway
Peru Indiana.
<br /><br />
Circus artifacts can al<br />so be mailed, delivered, or picked up.
Contact the Circus City Fes<br /><br />tivals office at 765-472-3918 for more details.
Circus City Gift Shop<br />
Complete your “Big Top” ex<br /><br />perience with a souvenir from our Circus City Gift Shop! Memorabilia such as post cards, t-shirts, hats, toys, and more are <br />available for purchase. The gift shop is located in the <br />Circus City Center and is open to the public Monday through Friday, <br />April through September from 9 am to 5 pm and October through March from 9 am to 4 pm.<br /> Proceeds are used to support Circus City Festivals, Inc. <br />and the Peru Amateur Youth Circus program.
</p>
<div id="ticketsbut" ><a id="order" href="http://sa1.seatadvisor.com/sabo/servlets/EventSearch?presenter=CIRCUSCITY">Place Ticket Order </a></div>
</div>
<div id="content"> </div>
</div>
<a href="http://www.firstbankofberne.com/"><img id="bank" src="images/bank.png" /></a>
<div id="footer" >
<p id="foottext"> Circus City Festival, Inc. • 154 North Broadway • Peru, IN 46970 • (765) 472-3918 • Fax:(765) 472-2826 • info@perucircus.com </p>
</div>
</div>
</body>
</html>
</html>
body{
margin:0px;
padding:0px;
}
html{
}
div.sidebar{
background-color:black;
width:35%;
min-width:430px;
filter: alpha(opacity=50);
opacity: .5;
}
#body{
position:relative;
min-height:100%;
min-width:100%
}
#foottext{
}
#contentContain{
position:absolute;
top:0px;
left:430px;
height:auto;
z-index:1000;
color:white;
}
#content{
position:absolute;
top:0px;
left:0px;
width:100%;
background-color:black;
filter: alpha(opacity=50);
opacity: .5;
height:100%;
z-index:-1;
}
#paragraph{
text-align:center;
}
#sideBarContainer{
height:100%;
}
#logo{
width:420px;
z-index:1000;
}
#footer{
background-color:black;
width:100%;
height:35px;
position:absolute;
bottom:0px;
left:0px;
text-align:center;
color: white;
z-index:1000;
}
a.buttons{
display:block;
text-decoration:none;
color:white;
height:35px;
line-height:35px;
text-align:center;
font-family: Lucida Bright;
vertical-align:middle;
}
#currentPage{
background-color:black;
filter: alpha(opacity=50);
opacity: .5;
}
#currentPage:hover{
filter: alpha(opacity=100);
opacity: 100;
}
a.buttons:hover{
background-color:black;
filter: alpha(opacity=100);
opacity: 100;
}
#buttons{
width:430px;
}
#bank{
position:absolute;
left:0px;
bottom:35px;
}
