Fixed Footer

Testing for a fixed footer

by Brian Duffey

HTML

<div id="header">Gifts
    <div id="menu">Menu | Options | Sign Off</div>
</div>
<div id="headPlace"></div>
<p>TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST~TEST!</p>
<p>E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br /></p>
<p>T<br />E<br />S<br />T<br />!</p>
<div id="footPlace"></div>
<div id="footer">
    <div id="chat">Me: Hello all<br />
        Brian: Testing<br />
        George: Merry Christmas<br />
        Me: 1-2-3<br />
    Paula: Happy birthday!</div>
    <div id="myChat">
        <input type="text" id="chat" name="chat" value="" />
        <input type="button" value="Submit" />
    </div>
    </div>

CSS

div#header { position:fixed; top:0; left:0; }
div#footer { position:fixed; bottom:0; left:0; background-color:lightblue; }
div#header, div#headPlace { background-color:lightblue; width:100%; height:35px; margin-bottom:10px; padding:20px 0 0 10px; }
div#footer, div#footPlace { width:100%; height:125px; margin-top:10px; }
div#chat { width:96%; height:75px; background-color:white; overflow-y:scroll; padding-left:5px; margin:10px auto 5px; }
div#myChat { width:97%; height:30px; background-color:lightblue; margin:0 auto; }
input#chat { width:91%; }
input#submit {width:9%; }
div#menu { float:right; margin-right:20px; }

JavaScript

Run