Css Help 100 % Height

tdktank59

Nov 21 2007, 04:35 AM

Allright so im working on a page and i need ot to always extent to the bottom of the page go figure lol....

However i cant figure out how to do this and have it work...

either css or w/e else can be used to do it i just cant get it to flaot or sit at the bottom

heres what ive got so far

http://woodlawnwt.com/tdc/duffield-collection.html

works in dreamwearver ( i use it for the color code and the ftp stuff... not for the wysiwig stuff lol...) but i cant get it to show in either ff or ie

http://ryanfait.com/sticky-footer/

solution is there.... lol

Saint_Michael

Nov 21 2007, 04:56 AM

easy fix, and I am reading your post right you want the content box between the header and the footer to extend you can do it one of two ways:

First one is fixed heighted in which I just add px, as you can see from here thats what I did, however for you dreamweaver fans it is line 58 and for this post I just marked with <--- LINE 58.

CODE

<table style="border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0);" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="798">
  <tbody><tr>
    <td height="99"><img src="duffield-collection_files/duffield-collection_02.png" alt="" height="99" width="798"></td>
  </tr>
  <tr>
    <td style="border-top: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" bgcolor="#614c1e" height="25"><table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tbody><tr>
        <td style="color: rgb(255, 255, 255); padding-left: 10px;">Home   |   Paintings   |   Contact Us</td>
        <td align="right"><table border="0" cellpadding="0" cellspacing="0">
          <tbody><tr>
            <td style="padding-left: 5px; padding-right: 5px; color: rgb(255, 255, 255);">Find an Artist:</td>
            <td><input name="search" value="" type="text" width="150"></td>
            <td style="padding-left: 5px; padding-right: 10px; color: rgb(255, 255, 255);">» Search</td>
          </tr>
        </tbody></table>
          </td>
      </tr>
    </tbody></table>
    </td>
  </tr>
  <tr>
    <td style="padding: 18px; height: 700px;" bgcolor="#ffffff" valign="top"> <----LINE 58
        <table style="border: 1px solid rgb(224, 193, 193);" bgcolor="#f4e9e9" border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody><tr>
            <td width="30%"> </td>
            <td width="70%"> </td>
          </tr>
        </tbody></table>
    </td>
  </tr>
  <tr>
    <td align="center" background="duffield-collection_files/duffield-collection_05.png" bgcolor="#ffffff" height="40" valign="middle">Copyright © 2007 The Duffield Collection</td>
  </tr>
</tbody></table>
</body></html>

The other version which I think is the one you want deals with Percentages and from the looks of it this is the one you want.

CODE

<table style="border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0);" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="798">
  <tbody><tr>
    <td height="99"><img src="duffield-collection_files/duffield-collection_02.png" alt="" height="99" width="798"></td>
  </tr>
  <tr>
    <td style="border-top: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" bgcolor="#614c1e" height="25"><table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tbody><tr>
        <td style="color: rgb(255, 255, 255); padding-left: 10px;">Home   |   Paintings   |   Contact Us</td>
        <td align="right"><table border="0" cellpadding="0" cellspacing="0">
          <tbody><tr>
            <td style="padding-left: 5px; padding-right: 5px; color: rgb(255, 255, 255);">Find an Artist:</td>
            <td><input name="search" value="" type="text" width="150"></td>
            <td style="padding-left: 5px; padding-right: 10px; color: rgb(255, 255, 255);">» Search</td>
          </tr>
        </tbody></table>
          </td>
      </tr>
    </tbody></table>
    </td>
  </tr>
  <tr>
    <td style="padding: 18px; height: 100%;" bgcolor="#ffffff" valign="top">
        <table style="border: 1px solid rgb(224, 193, 193);" bgcolor="#f4e9e9" border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody><tr>
            <td width="30%" ><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></td>
            <td width="70%"> </td>
          </tr>
        </tbody></table>
    </td>
  </tr>
  <tr>
    <td align="center" background="duffield-collection_files/duffield-collection_05.png" bgcolor="#ffffff" height="40" valign="middle">Copyright © 2007 The Duffield Collection</td>
  </tr>
</tbody></table>
</body></html>

tdktank59

Nov 21 2007, 05:34 AM

I aslo failed to mention that i want it to be for any size window not just mine or yours... so its gotta be css i guess or javascript... but meh i dont know...

actually that doesnt work lol... check ur <br />'s in the second one...

what im trying to do is have the footer litteraly float at the bottom of the page...

with the white extending down the little pink box is worthless...

heres kinda what im talking about but when it goes farther than the page it screws up...
as show here...

http://woodlawnwt.com/tdc/test.html

sonesay

Nov 21 2007, 06:01 AM

very common problem with working with layouts in CSS. I've used similar layouts in the past and when you start adding content into it the layout falls apart. I dont know whats causing it since I dont fully understand how to use CSS. Theres also the issue with certain broswers failing to display it correctly when others do.

tdktank59

Nov 21 2007, 06:32 AM

http://woodlawnwt.com/tdc/duffield-collection.html

seems to wokr now bult it off of the dudes code instead of usiong my own lol...
guess it fixed it...

feel free to copy w/e u want and id do it soon casue im taking it down shortly and replacing it with my actual code...

actually never mind heres what ive got and it seems to work...

pretty much eveything is copied form that page i just changed the stuff...
so if an admin wants to remove the pints for this post w/e but i say at elast leave the content incase that ryan dudes site goes down... so all the codes here...

page.html

CODE

<!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">
<head>
    <title>The Duffield Collection</title>

    <link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>

<div class="wrapper">
    <div class="header"></div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr><td bgcolor="#614c1e">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: solid 1px #000000; border-bottom: solid 1px #000000;">
                <tr>
                  <td style="color:#FFFFFF; padding-left:10px;">
                    Home | Paintings | Contact Us
                  </td><td align="right">
                     <table border="0" cellspacing="0" cellpadding="0">
                         <tr><td style="padding-left:5px; padding-right:5px; color:#FFFFFF;">
                            Find an Artist:
                        </td><td>
                             <input type="text" width="150" name="search" value="" />
                        </td><td style="padding-left:5px; padding-right:10px; color:#FFFFFF;">
                             » Search
                        </td></tr>
                     </table>
                </td></tr>
            </table>
        </td></tr>
        <tr><td style="padding: 18px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4e9e9" style="border:solid 1px #e0c1c1;">
              <tr>
                <td width="30%"> </td>
                <td width="70%"> </td>
              </tr>
            </table>
        </td></tr>
    </table>
    <div class="push"></div>
</div>
<div class="footer">
    Copyright © 2007 The Duffield Collection :: All rights reserved.<br />
    Created by Woodlawn Web Technologies
</div>

</body>
</html>

layout.css

CODE

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -40px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 40px; /* .push must be the same height as .footer */
}

style.css

CODE

body {
    text-align: center;
}
.wrapper {
    width: 798px;
    text-align: left;
    border-right: solid 1px #000000;
    border-left: solid 1px #000000;
}
.header {
    width: 798px;
    height: 99px;
    text-indent: -9999em;
    background: #fff url(images/duffield-collection_02.png) no-repeat;
}
img {
    float: right;
}
h2 {
    padding: 15px 0;
    color: #1b73d6;
    font: 1.3em verdana,sans-serif;
}
p {
    padding: 0 0 15px;
    color: #194379;
    font: 1em/1.3em arial,sans-serif;
}
.footer {
    width: 798px;
    margin: 0 auto;
    background: #a3b2c6 url(images/duffield-collection_05.png) no-repeat 0 0;
}
a {
    color: #194379;
}
a:hover {
    text-decoration: none;
}

Saint_Michael

Nov 21 2007, 06:33 AM

Well it was your coding of the CSS file that was messing it up, you had an extra height:100%; that did not need to be in there. I had to rearrange your css code to figure it out, and so I present you your footer solution. Also some of your divs where missed places thus the reason your footer was all up in the content.

CSS

CODE

*/





* {
	margin: 0;
}
html, body {
	height: 100%;
}
body {
height:100%;
background-color:#e0dac1;
margin-bottom:0;
margin-top:0;
}
body,td,th {
color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
a:link,a:visited,a:active {
color:#666;
text-decoration:none;
}

a:hover {
color:#000;
text-decoration:none;
}

.wrapper {
background-color:#FFF;
border-left:solid 1px #000;
border-right:solid 1px #000;
margin:0 auto 40px;
position:relative;
width:798px;
}

.banner {
background-image:url(images/duffield-collection_02.png);
background-repeat:no-repeat;
height:99px;
width:798px;
}

.nav {
clear:right;
float:left;
height:25px;
text-align:left;
vertical-align:middle;
}

.nav_container {
background-color:#614c1e;
border-bottom:solid 1px #000;
border-top:solid 1px #000;
height:25px;
width:798px;
}

.search {
clear:right;
float:right;
height:25px;
text-align:center;
vertical-align:middle;
}
.container {
background-color:#FFF;
width:798px;
}

.content {
padding:18px;
width:762px;
}

.footer, .push {
	height: 40px; /* .push must be the same height as .footer */
}

.footer {
background-color:#cbc8ae;
background-image:url(images/duffield-collection_05.png);
background-position:center bottom;
background-repeat:no-repeat;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
position:relative;
text-align:center;
vertical-align:middle;
width:798px;
}

HTML

CODE

<!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><title>The Duffield Collection</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test_files/style.css" rel="stylesheet" type="text/css" />
</head><body>
<div class="wrapper">
  <div class="container">
        <div class="banner"></div>
        <div class="nav_container">
            <div class="nav">home artuists contact us</div>
            <div class="search"><form action="search.php" method="post"><input name="search" value="" type="text" width="150" />
            </form></div>
        </div>
        <div class="content"></div>
  </div>
    <div class="push"><div class="footer">
    Copyright © 2007 The Duffield Collection :: All rights reserved.<br />
  Created by: Woodlawn Web Technologies
</div>
</div>
</div>
</body></html>

So now it should work like the footer sticky was designed for.

EDIT:

Ok which design are you going with tables or tabless??

tdktank59

Nov 21 2007, 08:19 PM

allright new update...

got most of it working however i cant get the background to extend to the bottom...

i have a quick fix method but i really dont want to use it since i requires another image loading... (for the background)

http://woodlawnwt.com/tdc/index.php

if u need any of the php code ill post it....
otherwise all the html is visible

\
allright somehow fixed it removed the height: 100%; from the wrapper css in layout

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE