two column layout-- want sticky footer only on maincontent
I am trying to create a webpage that uses the two-column layout found on this site (http://www.dynamicdrive.com/style/la...-frame-layout/).
I want a header and footer only on the right, which is the #maincontent side. I have the barebones set up right now so that the header image covers the entire column at the top. I am attempting to have the footer along the bottom of the column that will be "sticky."
HTML:
HTML Code:
<body>
<div id="framecontent">
<div class="innertube">
<img class="pos_top "id="rcorners" src="images/logo.jpg" style="width:150px; height:150px""
</div>
</div>
<div id="maincontent">
<img src="images/Header_1.jpg" style="width:100%; height:200px">
<div id="footer">©Copyright 2015. All Rights Reserved.</div>
</div>
</div>
</body>
CSS:
Code:
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
height: 100%;
overflow: hidden;
background: purple;
color: white;
}
#maincontent{
position: fixed;
top: 0;
left: 200px;
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
#rcorners {
border-radius: 25px;
border: 2px solid orchid;
padding: 5px;
width: 150px;
height: 150px;
}
#footer {
background-color:purple;
color:white;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align:center;
padding:5px;
}
.pos_top {
position: relative;
top: 100px;
}
.innertube{
margin: 15px;
}
Then I tried to add a <section> to my initial page that will appear in the middle of the right column. I have been successful in getting it placed where I want it and to look like I want it to. However, when I add this <section>, my footer slides to the bottom of the left (#framecontent). What am I doing wrong.
HTML for <section> (placed between <img> and <div id="footer"> in #maincontent above):
HTML Code:
<section>
<h2 style="text-align:center; font-family:arial;">Title of Box</h2>
<p style="text-align:center; font-family:arial;">Information text<button type="button"
onclick="location.href='https://www.google.com/'">Go</button></p>
<p style="text-align:center; font-family:arial;">Link to page<button type="button"
onclick="location.href='Home.html' ">Home</button></p>
</section>
CSS for section:
Code:
section {
background-color: gold;
position: fixed;
top: 300px;
left: 30%;
width: 600px;
border: 15px solid black;
}
I would really appreciate some help with this. :)
