two column layout-- want sticky footer only on maincontent

**MandaRyte** · 04-28-2015, 07:39 AM

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">&copy;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.

**molendijk** · 04-28-2015, 09:55 AM

Section:

Code:

section {
background-color: gold;
position: fixed;
top: 250px;
left: 30%;
padding: 10px;
width: 40%;
margin-left: 80px;
border: 15px solid black;
bottom: 50px;
overflow: auto;
}

**MandaRyte** · 04-28-2015, 06:47 PM

Thanks, Arie. I tried this, but the footer didn't move back to the right column where I want it. This only adjusted the size of my section. I appreciate your effort!

**molendijk** · 04-28-2015, 07:58 PM

That does not happen here. Maybe I don't understand what you mean. Here's a quick code:

Code:

<!doctype html>
<html >
<head>

<title>&nbsp;</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

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

#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-colorurple;
color:red;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align:center;
padding:5px;
}

.pos_top {
position: relative;
top: 100px;
}

.innertube{
margin: 15px;
}


section {
background-color: gold;
position: fixed;
top: 250px;
left: 30%;
padding: 10px;
width: 40%;
margin-left: 80px;
border: 15px solid black;
bottom: 50px;
overflow: auto;
}
</style>


</head>

<body>

<div id="framecontent">
<div class="innertube">
<img class="pos_top" id="rcorners" alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Eug%C3%A8ne_Ferdinand_Victor_Delacroix_043.jpg/640px-Eug%C3%A8ne_Ferdinand_Victor_Delacroix_043.jpg" style="width:150px; height:150px">
</div>
</div>





<div id="maincontent">
<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Eug%C3%A8ne_Ferdinand_Victor_Delacroix_043.jpg/640px-Eug%C3%A8ne_Ferdinand_Victor_Delacroix_043.jpg" style="width:100%; height:200px">
<div id="footer">&copy;Copyright 2015. All Rights Reserved.</div>
</div>


<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>
<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa

</section>




</body>

</html>