Sidebar and Footer Disappear When Submitting Form

Hi there,

I'm building an astrology website which revolves around a php calculation program.

I've used a CSS template for my website and have a question regarding an issue I'm having with using it in conjunction with my php calculation program.

Everything fine until you submit the form and it generates a new page with the resulting data output. The sidebar and the footer both dissapear for some reason possibly because the page is too long, but I'm not sure why this should affect anything.

Any help would be grately appreciated!

Here's the html for the page in question (note the PHP include for the calculation program):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Astrology</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="http://example.com/Circle.css" type="text/css" />
</head>
<body>
<div id="header">
 <div id="header-content">
 <h1 id="logo">Example<span class="orange">Example</span></h1>
 <h2 id="slogan">Your Home for Example</h2>
 <div id="header-links">
 <p> <a href="http://www.example.com/">Home</a> | <a href="http://www.example.com/">Contact</a> | <a href="http://www.example.com/">Site Map</a> </p>
 </div>
 <ul>
 <li><a href="http://www.example.com/" id="current">Home</a></li>
 <li><a href="http://www.example.com/midpointcalculator.php">Calculator</a></li>
 <li><a href="http://www.example.com/calculator.php">Example</a></li>
 <li><a href="http://www.example.com/">About</a></li>
 </ul>
 </div>
</div>
<div id="content-wrap">
 <div id="content">
 <div id="main"> <a name="TemplateInfo"></a>
 <h1>Calculation Tool</h1>
 
 <p><a href="http://example.com/"><img src="http://example.com/sample-image.jpg" width="174" height="140" alt="Jup" class="float-left" /></a> Example.</p>
 
 <?php include('form.php'); ?>

 </div> 
 <div id="sidebar">
 
 <h1>Menu</h1>
 <ul class="sidemenu">
 <li><a href="http://example.com/">Home</a></li>
 </ul>
 <h1>Tools</h1>
 <ul class="sidemenu">
 <li><a href="http://example.com/">Calculator</a></li>
 <li><a href="http://example.com/">Calculator</a></li>
 <li><a href="http://example.com/">Transits</a></li>

 </ul>
 <h1>Words</h1>
 <p>&quot;No man becomes rich unless he enriches others.&quot;</p>
 <p class="align-right">- Andrew Carnegie</p>
 <h1>Support</h1>
 <p>Example</p>
 </div>
 </div>
</div>
<div id="footer">
 <div id="footer-content">

 <div class="col2 float-right">
 <p> &copy; copyright 2012 <strong>Example.com</strong><br />
 Design by: <a href="http://www.example.com/">shout</a> &nbsp; &nbsp; Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://validator.w3.org/check/referer">XHTML</a> </p>
 </div>
 
 </div>
</div>


<!-- Start of Code for Default Guide -->
<script type="text/javascript">
var sc_project=7616896; 
var sc_invisible=1; 
var sc_security="fdac59ab"; 
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script>
<noscript><div class="statcounter"><a title="tumblr site
counter" href="http://statcounter.com/tumblr/"
target="_blank"><img class="statcounter"
src="http://c.statcounter.com/7616896/0/fdac59ab/1/"
alt="tumblr site counter"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->


</body>
</html>

And here's the CSS Style Sheet:

/********************************************
 /********************************************
 HTML ELEMENTS
********************************************/ 
 
/* top elements */
* { 
padding: 0; margin: 0;
}
body {
margin: 0; padding: 0;
font: normal .70em/1.6em Verdana, 'Trebuchet MS', Tahoma, sans-serif;
color: #666666;
text-align: center;
background: #180700;
}
 
/* links */
a {
color:#CB4721; 
background-color: inherit;
text-decoration: none;
}
a:hover {
background-color: inherit;
text-decoration: underline;
}
 
/* headers */
h1, h2, h3 {
font: normal 1.8em Georgia, "Times New Roman", Times, serif;
color:#222;
letter-spacing:-1px;
}
h1 { font-size: 1.7em; } 
h2 { font-size: 1.5em; color:#74743D; }
h3 { font-size: 1.5em; color:#C34E23; font-weight: normal; letter-spacing: 0px;}
 
#main h1 { 
font: normal 1.8em Georgia, "Times New Roman", Times, serif;
color: #222; 
padding: 0 0 5px 0;
margin: 0 15px 15px 15px;
letter-spacing:-1px;
background:url(../images/bk_dotted.gif) bottom left repeat-x;
}
#sidebar h1 {
font: normal 1.7em Georgia, "Times New Roman", Times, serif;
/* color: #74743D; */ 
color: #6C6E3A;
padding: 0;
margin: 0 0 10px 5px;
letter-spacing:-1px;
}
 
p, h1, h2, h3 {
margin: 10px 15px;
padding: 0;
}
 
ul, ol {
margin: 10px 30px;
padding: 0 15px;
}
 
/* images */
img {
border: 1px solid #DADADA;
padding: 5px;
}
img.no-border {
border: none;
}
img.float-right {
 margin: 5px 0px 5px 15px; 
}
img.float-left {
 margin: 5px 15px 5px 0px;
}
 
code {
 margin: 5px 0;
 padding: 10px;
 text-align: left;
 display: block;
 overflow: auto; 
 font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
 /* white-space: pre; */ 
 background: #FCFCF9;
 border: 1px solid #EFEFEF;
}
acronym {
 cursor: help;
 border-bottom: 1px solid #777;
}
blockquote {
margin: 15px;
 padding: 0 0 0 30px; 
 font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif; 
background: #FCFCF9;
 border: 1px solid #EFEFEF;
color: #6C6E3A;
}
 
/* form elements */
form {
margin: 15px;
padding: 0;
border: 1px solid #EFEFEF; 
background: #F8F8F8;
}
label {
display:block;
font-weight:bold;
margin:5px 0;
}
input {
padding: 2px;
border: 1px solid #EFEFEF;
font: normal 1em Verdana, 'Trebuchet MS', Tahoma, sans-serif;
color: #666666;
}
textarea {
width: 280px;
padding:2px;
border: 1px solid #EFEFEF;
font: normal 1em Verdana, 'Trebuchet MS', Tahoma, sans-serif;
height:100px;
display:block;
color: #666666;
}
input.button { 
margin: 0; 
font: bold 1em Arial, Sans-serif; 
border: 1px solid #EFEFEF;
padding: 2px 3px; 
background: #F1F0E4;
}
 
/* search form */
.searchform {
background-color: transparent;
border: none;
margin: 0; padding: 5px 0 15px 0;
width: 190px;
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
width: 120px;
color: #333; 
height: 18px;
padding: 2px;
vertical-align: top;
}
.searchform input.button { 
font: bold 12px Arial, Sans-serif; 
color: #333;
width: 60px;
height: 26px;
border: none;
padding: 3px 5px;
vertical-align: top;
}
 
/***********************
 LAYOUT
************************/
 
#header-content, #footer-content, #content {
width: 810px;
}
 
/* header */
#header {
background: #FFF url(headerbg.jpg) repeat-x 0 0;
height: 160px;
text-align: left;
}
#header-content {
position: relative;
margin: 0 auto; padding: 0;
}
#header-content #logo {
position: absolute;
font: normal 40px/65px Georgia, "Times New Roman", Times, serif;
letter-spacing: -1px; 
color: #FFF;
background: #3F1204 url(logobg.jpg) repeat-x left top;
border: 1px solid #4E460F;
height: 65px;
padding: 0 10px;
margin: 0;
 
/* change the values of left and top to adjust the position of the logo */
top: 18px; left: 0px;
}
#header-content #slogan {
position: absolute;
font: normal 12px 'Trebuchet MS', Tahoma, sans-serif;
letter-spacing: 0px;
/* color: #D4AA80; */
color: #BBB; 
margin: 0; padding: 0;
 
/* change the values of left and top to adjust the position of the slogan */
top: 88px; left: 30px;
}
 
/* header menu */
#header-content ul {
position: absolute;
right: 0px; top: 125px; 
font: bold 12px Georgia, "Times New Roman", Times, serif;
list-style: none;
margin: 0; padding: 0;
text-transform: uppercase;
}
#header-content li {
display: inline;
}
#header-content li a {
float: left;
display: block;
padding: 0px 18px 7px 18px;
color: #F3A251; 
/* color: #C8935D; */
text-decoration: none;
}
#header-content li a:hover {
color: #F88F26;
}
#header-content li a#current {
color: #FFF;
}
 
#header #header-links {
position: absolute;
top: 0px; right: 0px;
color: #8E5F2F;
font-size: 90%;
}
#header #header-links a {
color: #A4A4A4;
text-decoration: none;
}
#header #header-links a:hover {
color: #F3A251;
}
 
/* content */
#content-wrap {
clear: both;
float: left;
width: 100%;
background: #FFF url(contentbg.jpg) repeat-y center top;
}
#content {
text-align: left;
padding: 0; margin: 30px auto;
}
 
/* sidebar */
#sidebar {
float: left;
width: 190px;
margin: 0 0 10px 0;
padding: 0;
}
#sidebar ul.sidemenu {
margin: 5px 0 15px 0;
padding: 0;
border-top: 1px dashed #E1E1E1;
}
#sidebar ul.sidemenu li {
list-style: none;
border-bottom: 1px dashed #E1E1E1;
}
#sidebar ul.sidemenu a {
display: block;
color: #666666; 
text-decoration: none;
padding:.3em 0 .3em 10px;
width: 94%;
}
#sidebar ul.sidemenu a:hover {
padding: .3em 0 .3em 10px;
color: #CB4721;
background: #FFF;
}
 
/* main */
#main {
margin: 0 19px 0 0; 
padding: 0;
width: 590px;
float: left;
}
#main p, #main h1, #main h2, #main h3, #main blockquote, #main form {
margin-left: 0;
}
#main form p {
margin: 15px;
}
 
/* footer */
#footer {
clear: both;
margin: 0; padding: 25px 0;
font: normal .95em 'Trebuchet MS', Tahoma, sans-serif;
text-align: left;
background: url(footerbg.jpg) repeat-x 0% 0%;
color: #CCC;
}
#footer p {
margin-left: 0;
}
#footer h2 {
font: bold 1.3em 'Trebuchet MS', Tahoma, sans-serif;
text-transform: uppercase;
letter-spacing: 0px;
color: #CC9933;
margin-left: 5px;
}
#footer-content {
margin: 0 auto;
}
#footer-content a{
color: #C8935D;
}
#footer-content a:hover {
color: #FFF;
text-decoration: none;
}
#footer-content ul {
list-style: none;
margin: 0; padding: 0;
width: 98%;
}
#footer-content ul.columns li {
border-bottom: 1px dashed #272727;
}
#footer-content ul.columns li.top {
border-top: 1px dashed #272727;
}
#footer-content ul.columns li a {
display: block;
line-height: 2em;
font-weight: normal;
padding-left: 5px;
width: 98%;
color: #BDBDBD;
}
#footer-content ul.columns li a:hover {
background: #202020;
color: #FFF;
text-decoration: none;
}
#footer-content .col {
width: 270px;
padding: 0 0 30px 0;
}
#footer-content .space-sep {
margin-right: 10px;
}
#footer-content .col2 {
width: 240px;
padding: 0 0 30px 0;
display: inline;
}
 
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left {text-align: left; }
.align-right {text-align: right; }
 
/* additional classes */
.clear { clear: both; }
.orange {
color: #F3A251;
}
 
.post-footer {
font-size: 95%;
border: 1px solid #EFEFEF; 
background: #F8F8F8; 
padding: 3px 10px;
margin: 20px 15px 10px 15px;
}
.post-footer .date {
background: url('clock.gif') no-repeat left center; 
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
background: url('comment.gif') no-repeat left center; 
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
background: url('page.gif') no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}

Thanks a lot in advance! :)

[edited by: alt131 at 7:31 pm (utc) on Jan 31, 2012]
[edit reason] Thread Tidy [/edit]

Sidebar and Footer Disappear When Submitting Form

HoldOrFold

rainborick

lucy24

HoldOrFold

Marshall

rainborick

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week