Page stopping halfway down and cutting content

Ty44ler · July 6, 2009

This is probably really simple and I'm just not seeing it, but I'm trying to get the page so it doesn't stop halfway down when maximized. Also, if I have a lot of content on my page, it will display my footer and cut off the rest of the content and end the page.

First picture shows how it cuts off short.

Second picture shows how it cuts off content.

CSS:

@charset "UTF-8";
/* =CALL LIBRARY */
@import url("reset-min.css"); /* ------- Reset all CSS Styles */

/* =GENERAL - the general styles */


body{
	font: 62.5%/2.2em "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #4b4942;
	background: #fff;
	overflow: scroll;
	min-height: 800px;
}

a{text-decoration: none;color: #5599a7;}

hr{ width: 100%;
height: 2px;
}

strong{font-weight: bold;}

/* =LAYOUT - the main layout styles */
.container{
width:905px;
height: auto;
margin: 0 auto;
overflow:hidden;
}

/* header layout */
#header{
	height: 60px;
	background: #4a4841 url(../images/top_bg1.jpg) top repeat-x;
	position: relative;
	margin-top: 20px;
}
#navigation{
position: absolute;
right: 829px;
top:10px;
width: 859px;
height: 39px;
}

	#navigation2{
position: absolute;
right: -575px;
top:344px;
width: 494px;
height: 40px;
}

/* main area layout */
#logo{
	width:905px;
	margin: 0 auto;
	background: none;
}


#main{
	margin-top: 0px;
	background-color:#FFF;
	padding:0px 0px 0px 0px;
	height: 100%;
	max-height:1080px;}

#leftcolumn{
	background-color:#FFF;
	float: left; width:193px;
	padding-top: 30px;
	overflow:visible;
	width:15%;
	}

#center{
float: left;
background-color:#FFF;
padding: 25px 5px 0px 10px;
width:50%;
overflow: visible;
}

#content{float: left;width:670px;
background-color:#FFF;
padding: 10px 20px;}

#rightcolumn{float: left;
		background-color:#FFF;
		margin-top: 30px;
		float: left;
		width:32%;
		overflow: hidden;
		}

/* bottom layout */
#bottominfo{
	border-top: 1px solid #42423b;
	background: #fff;
	padding-bottom:25px;
	overflow: hidden;
	padding-left: 3px;
	position:relative;
}

.bottomright{margin-right:0;}

#topinfo{
	width: 100%;
	overflow: hidden;
}
.topcolumn{
	width:100%;
	margin-right: 18px;
}
	.topcolumn1{
		float: left;
	width:50%;
	margin-right: 18px;
}
.topright{margin-right:0;}
/* =HEADER - the header styles */
#header .container{height: 200px;}
/* logo */
h1{
	font: 35px Arial, Helvetica, sans-serif;
	letter-spacing: -2px;
	padding: 0px 9px 25px 0px;
	display: block;
	color: #fff;
}
h1 a{
	font: 24px/24px Arial, Helvetica, sans-serif;
	font-weight: bold;
	letter-spacing: -2px;
	padding: 0px 9px 25px 0px;
	display: block;
	color: #fff;
	/*background: url(../images/logo_bg.gif) left top no-repeat;*/
}
h1 a:hover{color: #fff;}
h1 a span{
	height:71px;
	width: 13px;
	position: absolute;
	top:0;
	right: -13px;
	cursor: pointer;
	background: url(../images/logo_right.gif) right top no-repeat;
}
/* top navigation */
#navigation li{
	float: left;
	padding-right: 27px;
	text-transform: uppercase;
	font-size: 1.3em;
	font-weight: normal;
}
#navigation li a{color: #fff;}


	#navigation2 li{
	float: left;
	padding-right: 27px;
	text-transform: uppercase;
	font-size: 1.3em;
	font-weight: normal;
}
#navigation2 li a{color: #fff;}


/* message and building pic */
#banner{
position: absolute;
height: 301px;
color: #a49c8f;
font-weight: bold;
padding:0 440px 0 7px;
bottom: -89px;
font-size: 1.3em;
left: 9px;
width: 409px;
}

/* =CONTENT - the content styles */
/* left column */
.leftbox{background: #f1f0ef;padding: 10px 23px 10px 23px;margin-bottom:3px;line-height:1.8em;}
h3.leftbox{font-size:19px;color: #8c8685; background: #f1f0ef url(../images/h3_bg_tall.jpg) 0 0 repeat-x;padding:5px 0 10px 23px;}
h3.header_small{font-size:15px;font-weight: bold;background: #f1f0ef;padding:0 23px 5px 23px;}

.features{padding-top:15px;font:1.27em Arial, Helvetica, sans-serif;}

#leftcolumn .leftbox p{padding-bottom:1em;line-height:1.5em; font-size:12px}	
/* center column */
.article_wrapper h2{color: #5699A7; font-size:2em;margin:10px 0; overflow:visible;}
.article_wrapper h3{color: #5699A7; font-size:1.5em;margin:10px 0; overflow:visible;}
.article_wrapper p{padding-bottom:10px;font-size:1.3em; padding-top: 5px; overflow: visible; margin-left: 20px;}	
/* right column */
.rightbox_wrapper{
	background: #eeeded;
	padding:6px 6px 6px 6px;
	margin-bottom: 20px;
	overflow: hidden;
	font-size:11px;
	line-height: 18px;
	color: #58584D;
	margin-right:10px;
	float: left;
}
.rightbox_statsL {
	float:left;
	font-weight:bold;
	background: #eeeded;
	width:40%;
	padding:6px;
	overflow: hidden;
	font-size:11px;
	line-height: 18px;
	color: #58584D;	
}
	.rightbox_statsR {
	background: #eeeded;
	float: right;
	width:50%;
	padding:6px;
	overflow: hidden;
	font-size:11px;
	line-height: 18px;
	color: #58584D;	
}
.rightbox{border: 1px #000000; width:265px; overflow: hidden; border-style:solid; padding: 3px 3px 3px 3px;}
.picturebox{border: 1px #000000; overflow: hidden; border-style:solid; padding: 3px 3px 3px 3px;}
.product_image{ float: left;margin: 6px 0 0 6px;}
.product_wrapper{float: right; padding: 3px 3px 8px 13px;}
.product_wrapper1{float: left; padding: 0px 3px 3px 13px;}
.product_wrapper h4{font-size:1.4em;color: #483F3D;font-weight: bold;padding-top:10px;}
.product_wrapper1 h4{font-size:1.3em;color: #483F3D;font-weight: bold;padding-top:10px;}
.product_wrapper h5{font-size:1em;color: #483F3D;font-weight: bold;padding-top:10px;}
.product_wrapper p{font-size:1em;}
.lastbox{margin:0;
margin-bottom: 15px;
border:none;
}
/* =BOTTOM */

	.topcolumn h3{
	border-bottom: 2px solid #fff;
	color: #fff; font-size:15px; padding:6px 0 5px 5px;
}
.topcolumn a{color:#FFF;
}
.topcolumn p{
	padding: 10px 35px 10px 5px;
	font-size: 1.2em;
}



ul.iconlist  li a:hover{background: #DEDEDE url(../images/footer_list.png) left top no-repeat;color: #42423b;}

.button{
	display: block;
	float: left;
	width: auto;
	line-height:1em;
	text-align: center;
	background: #659AA6;
	border: 4px solid #fff;
	color: #fff;
	cursor: pointer;
	margin:0;
	padding:3px 8px; /* IE6 */
}

/* NAVIGATION */


ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 10em;
}

ul.menu a {
  display: block;
  text-decoration: none;
  font-size: 1.4em;

}

ul.menu li {
  margin-top: 1px;
  background:none;
}

ul.menu li a {
  background: #f1f0ef;
  color: #000;
  padding: 0.5em;
  padding-left: 20px;
  background-image:url(../images/Bolt.png); background-repeat:no-repeat; background-position:left;
}

ul.menu li a:hover {
  background: #DEDEDE;
  background-image: url(../images/Bolt%20Small.png); background-repeat:no-repeat; background-position:left;
}

ul.menu li ul li a {
  background: #DEDEDE;
  color: #000;
  margin-left: 10px;
  padding-left: 15px;
  background:none;
}

ul.menu li ul li a:hover {
  background: #DEDEDE;
  margin-left: 10px;
  padding-left: 15px;
}

/* END OF NAVIGATION */

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>H.A. Sack Co., Inc.</title>
<link href="stylesheets/common.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="Scripts/menu.js" type="text/javascript"></script>
<!-- <link rel="stylesheet" type="text/css" href="Scripts/style.css" /> -->
<style type="text/css">
<!--
body {
background-image: url(images/globeback.jpg);
background-repeat: repeat-x;
}
-->
</style>

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body>

<!-- HEADER --->
<?php include ("header.php"); ?>
<div id="main" class="container">
  <div id="leftcolumn">
    <!-- NAVIGATION -->
    <?php include ("navigation.php"); ?>
    <p> </p>
    <p> </p>
    <p> </p>
  </div>
  <!-- main content area -->
  <div id="center">
    <div class="article_wrapper">
      <h2>Contact </h2>
      <div class="article_wrapper">
        <p><strong>Address: </strong></p>
        <p>3302 Zell Miller Parkway  <br />
          P.O. Box 528<br />
          Statesboro, Georgia 30459 </p>
        <p><strong>Email:</strong></p>
        <p>[email protected] </p>
        <p> <strong>Telephone:</strong> 912.871.8771 </p>
        <p> <strong>Toll-Free:</strong> 800.864.1229 </p>
        <p> <strong>Fax:</strong> 912.681.6001 </p>
        <br />
        <p><strong>Directions from I-16:</strong></p>
        <li>Take Exit 116 (Highway 301) toward Statesboro </li>
        <li>Travel approximately 5.5 miles until you get to the first stop light</li>
        <li>Turn left at the stop light in to the Gateway Industrial Park</li>
        <li>Go over the railroad track, and we will be the brick building on the left</li>
        <p></p>
        <br />
      </div>
    </div>
  </div>
  <!-- BOXES TO THE RIGHT -->
  <div id="rightcolumn">
    <div class="rightbox_wrapper">
      <div class="rightbox">
        <p><img src="images/image2-Side.jpg" width="262" height="175" /></p>
      </div>
    </div>
    <div class="rightbox_wrapper">
      <div class="rightbox">
        <div class="rightbox_statsL">
          <p>Client:</p>
          <p> </p>
          <p>Location: </p>
          <p>Contractor: </p>
          <p>Architect: </p>
          <p>Contract Awarded: </p>
          <p>Completion Date: </p>
          <p>Value:</p>
        </div>
        <div class="rightbox_statsR">
          <p>Sumter Co. Board of Commissioners</p>
          <p>Americus, GA </p>
          <p>Rosser International, Inc. </p>
          <p>Rosser International, Inc.</p>
          <p>July 2007 </p>
          <p>June 2009 </p>
          <p>$1.52 Million</p>
        </div>
      </div>
    </div
  >
  </div>
</div>
<div id="bottominfo">
  <div class="container">
    
    <!-- FOOTER -->
    <?php include ("footer.php"); ?>
    
  </div>
</div>
</body>
</html>

[attachment deleted by admin]

haku · July 6, 2009

What's in footer.php?

Hybride · July 7, 2009

I think this

  .container{
   width:905px;
   height: auto;
   margin: 0 auto;
   overflow:hidden;
   }

overflow:hidden is messing you over, you have it applied in both content and footer. Try either changing it to overflow:visible or setting your footer container to a different div.

Ty44ler · July 7, 2009

What's in footer.php?

<p>
<a href="index.php">HOME </a>| <a href="profile.php">Profile</a> | <a href="markets.php">Markets</a> | <a href="services.php">Services</a> | <a href="projects.php">Projects</a> | <a href="careers.php">Careers</a> | <a href="news.php">News</a> | <a href="contact.php">Contact</a> | <a href="http://www.sack.ftpaccess.cc/my dropbox/project files/index.php">Client Files </a></p>
<div class="bottomcolumn bottomright">
<p align="center">© 2002-09 H.A. Sack  Corporation, <a href="Link #1"><strong>an Equal Opportunity Employer</strong></a> • Use of this website signifies your  agreement to the <a href="terms.php"><strong>Terms and  Conditions of Use</strong></a>.
</p>
</div>

haku · July 8, 2009

Actually, I think Hybride had it right - try removing overflow:hidden.

Sign In

Page stopping halfway down and cutting content

Recommended Posts

Ty44ler

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Hybride

Link to comment

Share on other sites

Ty44ler

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information