Possible CSS Issues

HTML & CSS
1

Hey everyone,

I am having some issues and I am wondering if you could help. I am using Extend Studios’ CSS Layouts 2 extension and making modifications to their code. I’m trying to ensure that the content area expands with the page as content is added, and that the footer remains at the bottom while the content area expands with content (not expanding when the window is re-sized). The footer should remain at the bottom. With the existing code, the content area is hidden by the footer as it expands.

The CSS:

html {
	height: 100%;
}

body  {
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	line-height: 157%;
	color: #666666;
	font-size: 13px;
	letter-spacing: 0px;
	min-height: 100%;
	background-image:url("../images/background.jpg");
	height: 100%;
}

/*opera fix */

body:before {
	content:"";
	height:100%;
	float: left;
	width:0;
	margin-top:-32767px;/
}

body h1  {
	font-size: 30px;
	font-weight: bold;
	color: #ffffff;
	line-height: 120%;
	margin: 16px 10px 10px 8px;
	text-align: center;
	padding: 0 0 0 0;
}

body h2  {
	color: #333333;
	font-size: 24px;
	font-weight: bold;
	line-height: 120%;
}

body h3  {
	color: #5F5F5F;
	font-size: 20px;
	font-weight: normal;
	line-height: 120%;
}

body h4  {
	color: #5F5F5F;
	font-size: 14px;
	font-weight: bold;
}

body p  {
	font-size: 13px;
	color: #666666;
	line-height: 157%;
}

body a  {
	color: #0000FF;
	font-weight: normal;
	text-decoration: none;
	font-size: 13px;
	line-height: 157%;
}

body a:active,
body a:hover {
	color: #FF0000;
}

body a:visited {
	color: #7A1A8B;
}.main_wrapper {
	clear: both;
	min-height: 100%;
	width: 1200px;
	margin: 0px auto;
	overflow: auto;
	padding-bottom: 120px; /* same height as footer */
}

.row_1 {
	clear: both;
	min-height: 46px;
}

.column_14 {
	float: left;
	width: 275px;
	min-height: 46px;
	background-image:url("../images/col1row1.jpg");
}

.column_15 {
	float: left;
	width: 653px;
	min-height: 46px;
	background-image:url("../images/col2row1-search.jpg");
}

.column_54 {
	float: left;
	width: 209px;
	min-height: 46px;
}

.column_55 {
	float: left;
	width: 247px;
	min-height: 46px;
}

.column_56 {
	float: left;
	width: 197px;
	min-height: 46px;
}

.column_16 {
	float: left;
	width: 272px;
	min-height: 46px;
	background-image:url("../images/col3row1.jpg");
}

.row_2 {
	clear: both;
	min-height: 90px;
	float:left;
	width:1061px;
}

.column_22 {
	float: left;
	min-height: 90px;
	width: 139px;
	background-image:url("../images/col1row3.jpg");
}

.column_21 {
	float: left;
	min-height: 90px;
	width: 0px;
}

.column_17 {
	float: left;
	width: 354px;
	min-height: 90px;
	background-image:url("../images/col1row2-logo.jpg");
}

.column_18 {
	float: left;
	width: 465px;
	min-height: 90px;
	background-image:url("../images/col1row2-middle.jpg");
}

.column_19 {
	float: left;
	width: 242px;
	min-height: 90px;
}

.row_15 {
	clear: both;
	min-height: 62px;
	background-image:url("../images/col3row1.gif");
}

.row_16 {
	clear: both;
	min-height: 28px;
	background-image:url("../images/col3row1a.gif");
}

.row_3 {
	clear: both;
	min-height: 12px;
}

.column_23 {
	float: left;
	width: 354px;
	min-height: 12px;
	background-image:url("../images/col1row3-left.png");
}

.column_24 {
	float: left;
	width: 465px;
	min-height: 12px;
	background-image:url("../images/col1row3-middle.png");
}

.column_25 {
	float: left;
	width: 381px;
	min-height: 12px;
	background-image:url("../images/col1row3-right.png");
}

.row_4 {
	clear: both;
	min-height: 35px;
}

.column_26 {
	float: left;
	width: 139px;
	min-height: 35px;
	background-image:url("../images/col1row4nav-left.png");
}

.column_27 {
	float: left;
	width: 185px;
	min-height: 35px;
	background-image:url("../images/col2row4nav.png");
}

a.rollover {
	display: block; 
	width: 185px; 
	height: 35px; 
	text-decoration: none;
	background: url("../images/home-nav-rollover.png");
}

a.rollover:hover {
	background-position: -185px;
}

.displace {
	position: absolute;
	left: -5000px;
}

.column_28 {
	float: left;
	width: 184px;
	min-height: 35px;
	background-image:url("../images/col3row4nav.png");
}

.column_29 {
	float: left;
	width: 185px;
	min-height: 35px;
	background-image:url("../images/col4row4nav.png");
}

.column_30 {
	float: left;
	width: 184px;
	min-height: 35px;
	background-image:url("../images/col5row4nav.png");
}

.column_31 {
	float: left;
	width: 184px;
	min-height: 35px;
	background-image:url("../images/col6row4nav.png");
}

.column_32 {
	float: left;
	width: 139px;
	min-height: 35px;
	background-image:url("../images/col7row4nav.png");
}

.row_5 {
	clear: both;
	min-height: 127px;
}

.column_33 {
	float: left;
	width: 139px;
	min-height: 127px;
	background-image:url("../images/col1row5-left1.png");
}

.column_34 {
	float: left;
	width: 922px;
	min-height: 127px;
	background-image:url("../images/col2row5-header-photo.jpg");
}

.column_35 {
	float: left;
	width: 139px;
	min-height: 127px;
	background-image:url("../images/col3row5-right.png");
}

.row_6 {
	clear: both;
	min-height: 35px;
}

.column_36 {
	float: left;
	width: 139px;
	min-height: 35px;
	background-image:url("../images/col1row6nav-left.png");
}

.column_37 {
	float: left;
	width: 185px;
	min-height: 35px;
	background-image:url("../images/col2row6nav.png");
}

.column_38 {
	float: left;
	width: 184px;
	min-height: 35px;
	background-image:url("../images/col3row6nav.png");
}

.column_39 {
	float: left;
	width: 185px;
	min-height: 35px;
	background-image:url("../images/col4row6nav.png");
}

.column_40 {
	float: left;
	width: 184px;
	min-height: 35px;
	background-image:url("../images/col5row6nav.png");
}

.column_41 {
	float: left;
	width: 184px;
	min-height: 35px;
	background-image:url("../images/col6row6nav.png");
}

.column_42 {
	float: left;
	width: 139px;
	min-height: 35px;
	background-image:url("../images/col7row6nav.png");
}

.row_7 {
	clear: both;
	min-height: 27px;
	width:1200px;
	background-image:url("../images/col1row7-middle.png");
}

.row_8 {
	clear: both;
	min-height: 1687px;
}

.column_43 {
	float: left;
	width: 395px;
	min-height: 1423px;
}

.column_45 {
	float: left;
	width: 139px;
	min-height: 1381px;
}

.row_23 {
	clear: both;
	min-height: 554px;
	background-image:url("../images/col1a-row1left.png");
}

.row_24 {
	clear: both;
	min-height: 20px;
	background-image:url("../images/col1a-row2left.png");
}

.row_25 {
	clear: both;
	min-height: 412px;
	background-image:url("../images/col1a-row3left.png");
}

.row_26 {
	clear: both;
	min-height: 19px;
	background-image:url("../images/col1a-row4left.png");
}

.row_27 {
	clear: both;
	min-height: 367px;
	background-image:url("../images/col1a-row5left.png");
}

.column_46 {
	float: left;
	width: 256px;
	min-height: 100%;
}

.row_28 {
	clear: both;
	min-height: 8px;
	background-image:url("../images/col1row8-leftsidebar.png");
	width:256px;
}

.row_29 {
	clear: both;
	min-height: 537px;
	width:256px;
	background-image:url("../images/col1row9-leftsidebar.png");
}

.row_30 {
	clear: both;
	min-height: 9px;
	width:256px;
	background-image:url("../images/col1row10-leftsidebar.png");
}

.row_31 {
	clear: both;
	min-height: 8px;
	width:256px;
	background-image:url("../images/col1row11-leftsidebar.png");
}

.row_32 {
	clear: both;
	min-height: 6px;
	width:256px;
	background-image:url("../images/col1row12-leftsidebar.png");
}

.row_33 {
	clear: both;
	min-height: 6px;
	width:256px;
	background-image:url("../images/col1row13-leftsidebar.png");
}

.row_34 {
	clear: both;
	min-height: 52px;
	width:256px;
	background-image:url("../images/col1row14-leftsidebar-header.png");
}

.row_35 {
	clear: both;
	min-height: 360px;
	width:256px;
	background-image:url("../images/col1row15-leftsidebar-content.png");
}

.row_36 {
	clear: both;
	min-height: 13px;
	width:256px;
	background-image:url("../images/col1row16-leftsidebar-bottom.png");
}

.row_37 {
	clear: both;
	min-height: 8px;
	width:256px;
	background-image:url("../images/col1row18-leftsidebar.png");
}

.row_38 {
	clear: both;
	min-height: 7px;
	width:256px;
	background-image:url("../images/col1row19-leftsidebar.png");
}

.row_39 {
	clear: both;
	min-height: 52px;
	width:256px;
	background-image:url("../images/col1row20-leftsidebar-header.png");
}

.row_40 {
	clear: both;
	min-height: 298px;
	width:256px;
	background-image:url("../images/col1row21-leftsidebar-content.png");
}

.row_41 {
	clear: both;
	min-height: 12px;
	width:256px;
	background-image:url("../images/col1row22-leftsidebar-bottom.png");
}

.row_42 {
	clear: both;
	min-height: 5px;
	width:256px;
	background-image:url("../images/col1row23-leftsidebar.png");
}

.row_43 {
	clear: both;
	min-height: 34px;
	width:256px;
	background-image:url("../images/col1row1-sidebarfooter.png");
}

.row_44 {
	clear: both;
	min-height: 42px;
	width:256px;
}

.row_45 {
	clear: both;
	min-height: 42px;
	width:256px;
}

.row_46 {
	clear: both;
	min-height: 42px;
	width:256px;
}

.row_47 {
	clear: both;
	min-height: 42px;
	width:256px;
}

.row_48 {
	clear: both;
	min-height: 42px;
	width:256px;
}

.row_49 {
	clear: both;
	min-height: 42px;
	width:256px;
}

.row_50 {
	clear: both;
	min-height: 62px;
	width:256px;
}

.column_44 {
	float: left;
	width: 805px;
	min-height: 1000px;
}

.row_51 {
	clear: both;
	min-height: 72px;
	width:675px;
	float:left;
	background-image:url("../images/col2row1-content-header.png");
}

.column_47 {
	float: left;
	min-height: 72px;
	width: 130px;
	background-image:url("../images/content-header-right.png");
}

.row_52 {
	clear: both;
	min-height: 100%;
}

.column_57 {
	float: left;
	width: 675px;
	background-image:url("../images/content-middle.png");
	min-height:100%;
	height:1300px;
}

.column_58 {
	float: left;
	width: 128px;
	min-height: 100%;
	height: 100%;
	background-image:url("../images/content-right-bg.png");
	repeat: repeat-y;
}

.column_48 {
	float: left;
	width: 675px;
	min-height: 100%;
	background:url("../images/content-middle.png");
	repeat: repeat-y;
}

.column_49 {
	float: left;
	width: 130px;
	min-height: 100px;
	repeat: repeat-y;
	background:url("../images/content-right-bg.png");
	repeat: repeat-y;
}

.row_53 {
	clear: both;
	min-height: 61px;
}

.column_50 {
	float: left;
	width: 675px;
	min-height: 17px;
	background-image:url("../images/col2row3-content-bottom.png");
}

.row_57 {
	clear: both;
	min-height: 44px;
}

.column_52 {
	float: left;
	width: 675px;
	min-height: 35px;
	background-image:url("../images/col3row1-sidebar-footer.png");
}

.column_53 {
	float: left;
	width: 130px;
	min-height: 34px;
	background-image:url("../images/col4row1-sidebarfooter.png");
}

.column_51 {
	float: left;
	width: 126px;
	min-height: 17px;
	background:url("../images/col3row3-right1.png") repeat-y;
}

.row_9 {
	clear: both;
	min-height: 166px;
}

.row_10 {
	clear: both;
	min-height: 166px;
}

.row_11 {
	clear: both;
	min-height: 166px;
}

.row_12 {
	clear: both;
	min-height: 166px;
}

.row_13 {
	clear: both;
	min-height: 166px;
}

/** contact form styling **/

.formstyle {
	width: 76%; 
	margin-left: auto; 
	margin-right: auto; 
	font-family: verdana, arial, sans-serif; 
	color: #ffffff;
}

.form1 {
	background: url("../images/form-textfield1.jpg");
	width: 194px; 
	height: 24px; 
	font-family: verdana, arial, sans-serif; 
	font-size: 12px; 
	margin: 2px 0px 0px 0px;
	border: 0px;
}

.form2 {
	background: url("../images/form-textarea1.jpg");
	width: 194px; 
	height: 107px; 
	font-family: verdana, arial, sans-serif; 
	font-size: 12px; 
	margin: 2px 0px 0px 0px;
	padding: 4px 0 0 0;
	border: 0px; 
}

.form3 {
	background: url("../images/form-text-dropdown1.jpg");
	width: 194px; 
	height: 24px;
	font-family: verdana, arial, sans-serif; 
	font-size: 12px; 
	margin: 2px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px;
}

.antispam {
	background: url("../images/anti-spam.png");
	width: 195px; 
	height: 69px; 
	border: 0px; 
	font-size: 12px; 
	margin: 10px 0 0 0;
	padding: 0 0 0 0;
	font-family: verdana, arial, sans-serif; 
	font-size: 12px;
}

.anti {
	background: url("../images/antispam-form.jpg");
	width: 88px; 
	height: 23px; 
	border: 0px; 
	font-size: 12px; 
	margin: 32px 0 0 98px;
	padding: 0 0 0 0;
	font-family: verdana, arial, sans-serif; 
	font-size: 12px;
}

.areaslist {
	font-family: verdana, arial, sans-serif;
	font-size: 16px; 
	font-weight: bold;
	color: #005a7f;
	line-height: 24px; 
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px; 
}

.areaslist li {
	font-family: verdana, arial, sans-serif; 
	font-size: 16px; 
	line-height: 24px; 
	margin: 0px 0px 0px 40px; 
	padding: 0px 0px 0px 0px;
	list-style-type: square;
}

.areaslist li #lastone {
	font-family: verdana, arial, sans-serif; 
	font-size: 12px; 
	line-height: 16px; 
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.areassearch {
	background: url("../images/search-text1.jpg");
	width: 153px; 
	height: 22px;
	border: 0px; 
	margin: 0px 0px 0px 33px; 
	padding: 0px 0x 0px 33px; 
	float: left;
}

.areasbutton {
	background: url("../images/search-button1.jpg");
	width: 49px; 
	height: 24px; 
	border: 0px; 
	margin: 0px 0px 0px 0px; 
	padding: 0px 0x 0px 0px; 
	float: right;
}

#footer {
	background: url("../images/footermenu-background.jpg");
	position: relative; 
	margin-top: -350px; 
	height: 350px; 
	clear: both; 
}

.footerrow1 {
	font-family: verdana, arial, sans-serif; 
	font-size: 14px; 
}

The HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>This of course would be the page title.</title>
  <link href="stylesheets/reset.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="scripts/browser-compatibility.js"></script>
  <link href="stylesheets/layout-css-1.css" rel="stylesheet" type="text/css" />
  <!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->
 </head>
 <body>
  <div class="main_wrapper cf">
   <div class="row_1 cf">
    <div class="column_14"></div>
    <div class="column_15">
     <div class="column_54"></div>
     <div class="column_55"></div>
     <div class="column_56"></div>
    </div>
    <div class="column_16"></div>
   </div>
   <div class="row_2">
    <div class="column_17"></div>
    <div class="column_18"></div>
    <div class="column_19">
     <div class="row_15 cf"></div>
     <div class="row_16 cf"></div>
    </div>
   </div>
   <div class="column_22"></div>
   <div class="column_21"></div>
   <div class="row_3 cf">
    <div class="column_23"></div>
    <div class="column_24"></div>
    <div class="column_25"></div>
   </div>
   <div class="row_4 cf">
    <div class="column_26"></div>
    <div class="column_27"> <a href="#" class="rollover"><span class="displace" style="margin: 0 150px 0 0px;">Home</span></a>

    </div>
    <div class="column_28"></div>
    <div class="column_29"></div>
    <div class="column_30"></div>
    <div class="column_31"></div>
    <div class="column_32"></div>
   </div>
   <div class="row_5 cf">
    <div class="column_33"></div>
    <div class="column_34"></div>
    <div class="column_35"></div>
   </div>
   <div class="row_6 cf">
    <div class="column_36"></div>
    <div class="column_37"></div>
    <div class="column_38"></div>
    <div class="column_39"></div>
    <div class="column_40"></div>
    <div class="column_41"></div>
    <div class="column_42"></div>
   </div>
   <div class="row_7 cf"></div>
   <div class="row_8 cf">
    <div class="column_43">
     <div class="column_45">
      <div class="row_23 cf"></div>
      <div class="row_24 cf"></div>
      <div class="row_25 cf"></div>
      <div class="row_26 cf"></div>
      <div class="row_27 cf"></div>
     </div>
     <div class="column_46">
      <div class="row_28 cf"></div>
      <div class="row_29 cf">
       <div style="display: block; width: 93%; margin-left: auto; margin-right: auto;">
        <img src="images/contactus.png" width="239" height="82" alt="Contact Us" />
       </div>
       <div class="formstyle">
        <form action="contactus.php" method="post">Name:
         <input class="form1" type="text" name="realname">Phone:
         <input class="form1" type="text" name="phone">Email:
         <input class="form1" type="text" name="email">Options:
         <input class="form3" type="text" name="options">Comments:
         <textarea class="form2" name="comments"></textarea>
         <div class="antispam">
          <input class="anti" type="text" name="antispam">
         </div>
         <p></p>
         <br/>
        </form>
       </div>
      </div>
      <div class="row_30 cf"></div>
      <div class="row_31 cf"></div>
      <div class="row_32 cf"></div>
      <div class="row_33 cf"></div>
      <div class="row_34 cf"></div>
      <div class="row_35 cf">
       <ul class="areaslist">
        <li>Information 1</li>
        <li>Information 1</li>
        <li>Information 1</li>
        <li>Information 1</li>
        <li>Information 1</li>
        <li>Information 1</li>
        <li>Information 1</li>
        <li>Information 1</li>
        <li>Information 1</li>
        <li>Information 1</li>
        <li style="font-size: 12px;">SEE ALL INFORMATION</li>
       </ul>
       <div style="margin: 45px 0px 0px 0px;">
        <input type="text" class="areassearch" name="areassearch">
        <img src="images/search-button1.jpg" width="49" height="24" border="0" alt="Search" />
       </div>
      </div>
      <div class="row_36 cf"></div>
      <div class="row_37 cf"></div>
      <div class="row_38 cf"></div>
      <div class="row_39 cf"></div>
      <div class="row_40 cf"></div>
      <div class="row_41 cf"></div>
      <div class="row_42 cf"></div>
      <div class="row_43 cf"></div>
     </div>
    </div>
    <div class="column_44">
     <div class="row_51">
       <h1>Choosing the Right One For Your Needs</h1>

     </div>
     <div class="column_47"></div>
     <div class="row_52 cf">
      <div class="column_57">
<! -- this column is the main content area -->
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>
       <p>&nbsp;</p>

      </div>
      <div class="column_58"></div>
     </div>
     <div class="row_53 cf">
      <div class="column_50"></div>
      <div class="column_51"></div>
      <div class="row_57 cf">
       <div class="column_52"></div>
       <div class="column_53"></div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div id="footer">
   <div class="footerrow1"></div>
   <div class="footerrow2"></div>
  </div>
 </body>

</html>
2

Hi,

It’s hard to debug properly without all the images to see what’s going on but you have got the sticky footer wrong here:


.main_wrapper {
	clear: both;
	min-height: 100%;
	width: 1200px;
	margin: 0px auto;
	overflow: auto;
	[B]padding-bottom: 120px; /* same height as footer */[/B]
}

First of all your footer is 350px not 120px tall so that’'s wrong for a start :slight_smile: but in fact that padding cannot be on the wrapper. The main wrapper is the 100% high mechanism to control the sticky footer and now you have stuck 120px padding on to it which means that the footer will always start 120px below the viewport and always be invisible. The wrapper must never have any padding or borders or margins or the effect won’t work.

The padding-bottom (350px not 120px) needs to be on the last inner container on that layout. That’s the reason that I prefer my header soak up method instead as you do it all at the start and can then forget about it (see css faq on the sticky footer).

3

Thank you Paul for your help. I used your header soak up method and it works perfectly. Whoo-hoo!! Now to finish this layout… :slight_smile: