• Locked
2 replies [Last post]
Thu, 2010-08-26 02:52
Hecatologue
Hecatologue's picture
User offline. Last seen 1 year 23 weeks ago. Offline
newbie
Timezone: GMT-7
Joined: 2010-08-26
Posts: 2
Points: 5

Hi, I'm doing a new site layout, and I was using Lorem ipsum to preview the width of the layout, when I realized that the footer seems to appear at a fixed height. It won't move no matter what I try, despite the fact that my content div text should make it lower. 

<!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">
 
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<title>simple document</title>
<style>
/** zero out default browser margins, padding and borders for all site elements below**/
body,table,tr,td,th,h1,h2,h3,h4,h5,p,ol,ul,li,form,input {
	margin:0;
	padding:0;
	border:0;
	line-height:1
}
 
/**For non-IE browsers**/
html, body {font-size:90%; height:100%; margin-bottom:1px; /**adds scrollbar in Mozilla**/}
 
/**For IE only**/
*body {font-size:76%; zoom: 1;}
 
body {
	background:url('http://i290.photobucket.com/albums/ll241/wierdology/bg-sky.png') repeat fixed center; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	text-align: center;
 -webkit-font-smoothing: antialiased;
}
 
#container { /* this is the holder for the page content */
    width: 950px;
    height:auto;
    border: 1px solid #dddddd;
    background-color: #ffffff;
    padding: 0px; /* pad the content a little */
    margin: 0px auto; /* this centers the container */
    -moz-box-shadow: 2px 2px 2px #202020;
    -webkit-box-shadow: 2px 2px 1px #202020;
    box-shadow: 2px 2px 2px #202020;
    progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=4);
}
 
 
#top {
background-color:#000000;
width:100%;
height:3%;
}
 
#header {
 width: 931px;
 color: #333;
 padding: 10px;
 border: 0px solid #ccc;
 height: 190px;
 margin: 0px 0 0 0;
 background-color: #F2F2F2;
}
 
#topnav {
 width:120px;
 padding:5px;
 float:left;
}
 
#vertical {
 width:1px;
 height:150px;
 padding:0px;
 margin:5px;
 float:left;
 background:#ffffff url('http://i290.photobucket.com/albums/ll241/wierdology/vertical_separator.png') repeat right top;
}
 
#topinfo {
 width:150px;
 padding:5px;
 float:left;
 text-align:left;
}
 
#divider {
 width: 950px;
 color: #333;
 height:50px;
 padding: 0px;
 border: 0px solid #ccc;
 margin: 0px 0px 0px 0px;
 background:#ffffff url('http://i290.photobucket.com/albums/ll241/wierdology/divider.png') repeat right top;
}
 
#content { 
 width: 929px;
 color: #333;
 border: 1px solid #ccc;
 background:#dddddd;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
}
 
li {
      list-style-type: none;
}
 
#bottom{ 
 width: 100%;
 height:200px;
 color: #333;
 clear:both;
 border: 0px solid #ccc;
 background-color:#000000;
 margin: 0 0 0 0;
 padding: 10px;
  /* for IE */
  filter:alpha(opacity=70);
  /* CSS3 standard */
  opacity:0.7;
  }
 
#footer { 
 width: 100%;
 color: #333;
 
 border: 0px solid #ccc;
 background-color:#000000;
 margin: 0 0 0 0;
 padding: 10px;
}
 
h1 { 
 font-family: 'Droid Serif', arial, serif; 
 font-size:14px;
 color:#37403C;
 text-align:left;
 text-transform:uppercase;
}
 
h1:first-letter {
 color:#85B34F;
}
 
b {
 font-family:verdana;
 font-size:7pt;
 color:#CC5252;
 text-weight:bold;
 text-transform:uppercase;
}
 
i {
 font-family:georgia;
 font-size:8pt;
 color:#B2CFC0;
 text-style:italics;
}
 
u {
 font-family:verdana;
 font-size:7pt;
 color:#39839D;
 text-transform:uppercase;
}
 
strike {
 font-family: verdana;
 font-size:7pt;
 color:#85B34F
}
 
 
 
    a.about  {   
    display: block;   
    background:  url(<a href="http://i290.photobucket.com/albums/ll241/wierdology/headerabout.png" rel="nofollow">http://i290.photobucket.com/albums/ll241/wierdology/headerabout.png</a>) top;   
    width: 102px;   
    height: 27px; 
    margin: 2px 0 2px 0;
    }
 
    a.about:hover {   
    background:  url(<a href="http://i290.photobucket.com/albums/ll241/wierdology/headerabout_hover.png" rel="nofollow">http://i290.photobucket.com/albums/ll241/wierdology/headerabout_hover.png</a>) no-repeat bottom;   
    }
 
    a.owner  {   
    display: block;   
    background:  url(<a href="http://i290.photobucket.com/albums/ll241/wierdology/headerowner.png" rel="nofollow">http://i290.photobucket.com/albums/ll241/wierdology/headerowner.png</a>) top;   
    width: 102px;   
    height: 27px; 
    margin: 2px 0 2px 0;
    }
 
    a.owner:hover {   
    background:  url(<a href="http://i290.photobucket.com/albums/ll241/wierdology/headerowner_hover.png" rel="nofollow">http://i290.photobucket.com/albums/ll241/wierdology/headerowner_hover.png</a>) no-repeat bottom;   
    }
 
    a.resources {   
    display: block;   
    background:  url(<a href="http://i290.photobucket.com/albums/ll241/wierdology/headerresources.png" rel="nofollow">http://i290.photobucket.com/albums/ll241/wierdology/headerresources.png</a>) top;   
    width: 102px;   
    height: 27px; 
    margin: 2px 0 2px 0;
    }
 
    a.resources:hover {   
    background:  url(<a href="http://i290.photobucket.com/albums/ll241/wierdology/headerresources_hover.png" rel="nofollow">http://i290.photobucket.com/albums/ll241/wierdology/headerresources_hover.png</a>) no-repeat bottom;   
    }
 
    a.tutorials  {   
    display: block;   
    background:  url(<a href="http://i290.photobucket.com/albums/ll241/wierdology/headertutorials.png" rel="nofollow">http://i290.photobucket.com/albums/ll241/wierdology/headertutorials.png</a>) top;   
    width: 102px;   
    height: 27px; 
    margin: 2px 0 2px 0;
    }
 
    a.tutorials:hover {   
    background:  url(<a href="http://i290.photobucket.com/albums/ll241/wierdology/headertutorials_hover.png" rel="nofollow">http://i290.photobucket.com/albums/ll241/wierdology/headertutorials_hover.png</a>) no-repeat bottom;   
    }
 
    a.exits {   
    display: block;   
    background:  url(<a href="http://i290.photobucket.com/albums/ll241/wierdology/headerexits.png" rel="nofollow">http://i290.photobucket.com/albums/ll241/wierdology/headerexits.png</a>) top;   
    width: 102px;   
    height: 27px; 
    margin: 2px 0 2px 0;
    }
 
    a.exits:hover {   
    background:  url(<a href="http://i290.photobucket.com/albums/ll241/wierdology/headerexits_hover.png" rel="nofollow">http://i290.photobucket.com/albums/ll241/wierdology/headerexits_hover.png</a>) no-repeat bottom;   
    }
 
 
</style>
</head>
<body>
<div id="top">&nbsp</div>
 
<!-- Begin Wrapper -->
<div id="container">
 
  <!-- Begin Header -->
  <div id="header">
 
<div id="topnav">
 <h1>Navigation</h1>
 <br />
 <ul>
  <li><a class="about" href=http://weirdology.dementedsquirrel.com/about.php"></a></li>
  <li><a class="owner" href=http://weirdology.dementedsquirrel.com/about.php"></a></li>
  <li><a class="resources" href=http://weirdology.dementedsquirrel.com/about.php"></a></li>
  <li><a class="tutorials" href=http://weirdology.dementedsquirrel.com/about.php"></a></li>
  <li><a class="exits" href=http://weirdology.dementedsquirrel.com/about.php"></a></li>
 </ul>
</div>
 
 
<br /><br /><div id="vertical">&nbsp</div>
 
<div id="topinfo">
<b>1</b> new icon texture pack
<br /><b>3</b> new stocks
<br /><b>New</b> background section
</div>
 
 
</div>
  <!-- End Header -->
 
  <!-- Begin Navigation -->
<div id="divider">&nbsp</div>
 
  <!-- End Navigation -->
  <!-- Begin Content -->
  <div id="content"> This is the content.
<br /><b>This is bold. Bah</b>
<br /><i>This is italics.</i>
<br /><u>This is underline</u>
<br /><strike>This is strike 3. You're out.</strike>
<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at ligula metus, sit amet semper eros. Sed vel ante enim, convallis auctor ipsum. Etiam facilisis leo massa, non tristique felis. Nam faucibus, mi volutpat molestie sagittis, risus turpis auctor dui, nec pellentesque risus justo eget eros. Integer non massa ut sem vestibulum vehicula. Sed in lacinia nulla. Suspendisse vitae ultrices erat. Nam bibendum, odio eget iaculis volutpat, tellus urna aliquam odio, at volutpat quam justo in urna. Curabitur augue mi, auctor ac sollicitudin ut, ullamcorper sollicitudin lectus. In vitae mauris metus. Nam elementum ligula vitae lacus adipiscing iaculis. Phasellus accumsan iaculis nunc a egestas. Duis commodo lobortis convallis.
 
<p>Nam lacus magna, condimentum eu mattis ut, egestas vel neque. Pellentesque pretium, purus a iaculis luctus, erat ligula tempor sem, quis semper purus ipsum vitae lorem. Praesent magna erat, imperdiet in consectetur non, viverra et massa. Aenean vel ipsum aliquet orci rutrum gravida. Maecenas nibh velit, lacinia sed varius nec, fringilla sed risus. Donec augue libero, lobortis quis rhoncus ac, fermentum sed neque. Nunc dapibus fermentum rhoncus. Praesent ac ipsum non mauris laoreet tincidunt. Maecenas ut purus dui, sit amet cursus dolor. Vivamus rutrum pellentesque enim. 
</p>
 
<p>Mauris euismod commodo neque nec accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel augue a ipsum blandit ullamcorper. Mauris ultricies, felis in hendrerit bibendum, neque nulla congue massa, a pellentesque arcu dolor ac ante. Duis gravida, neque a mattis feugiat, urna libero laoreet felis, a gravida metus nibh in ante. Pellentesque ac tellus diam. Sed tortor erat, facilisis consequat suscipit vitae, consectetur at risus. Cras dictum, ante in volutpat volutpat, sem justo tristique dui, quis molestie erat nulla eu quam. Proin vulputate, diam ut posuere venenatis, orci odio fringilla nisi, id consectetur enim leo tempus nunc. Morbi vehicula, mi ac pharetra semper, libero dolor consectetur dui, sollicitudin venenatis enim libero ut tortor.
</p>
 
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit interdum quam, quis cursus arcu fringilla sit amet. Cras eget nulla ac nulla faucibus suscipit. Nullam venenatis, lectus sed luctus dignissim, metus massa fermentum diam, a pharetra est lorem eu quam. Nam malesuada metus sit amet velit consectetur sit amet tristique turpis mattis. Aenean arcu lectus, luctus et pretium sit amet, porta a sem. Etiam accumsan lobortis lorem id porttitor. Nullam a elit urna, vel interdum nulla. Quisque sit amet odio dui, nec dignissim tortor. Nulla nec purus ante, eget commodo risus. Vestibulum gravida tincidunt nisl nec venenatis. In vitae leo vel dolor placerat cursus ut at est. Cras vel nulla mi, eget porta arcu. Vivamus ultricies volutpat magna. Quisque ultricies pretium dapibus. Nam euismod enim vel magna facilisis a semper purus cursus. Quisque magna nulla, hendrerit laoreet rhoncus ac, suscipit vitae odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur egestas arcu et turpis mattis ut euismod ante volutpat.
</p>
 
<p>Sed consectetur, nulla in suscipit tincidunt, purus tellus adipiscing dui, id auctor ante urna sed felis. Duis luctus venenatis massa nec placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at sodales neque. Suspendisse potenti. Vestibulum tristique ornare augue, blandit blandit urna pulvinar eu. Sed id eros eget tortor laoreet luctus. Morbi non odio tellus, id ultricies mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam id est tortor, nec pulvinar nisl. Ut pulvinar neque sit amet elit tempus ultricies vel at erat. Sed porta, sapien eget faucibus cursus, est dolor pellentesque orci, ultricies lobortis tortor purus in magna. Ut velit turpis, rutrum vitae scelerisque eu, bibendum nec odio. Quisque vitae nulla vitae quam aliquet dapibus. Sed dui nisi, fermentum viverra varius ut, interdum non ante. Proin risus massa, volutpat nec adipiscing quis, sodales in nunc. Cras dapibus eleifend ligula, eu cursus enim venenatis at. Suspendisse euismod dolor ut justo tincidunt sit amet tincidunt velit malesuada. Ut tortor libero, consequat eget feugiat quis, iaculis a est. 
</p>
  </div>
  <!-- End Content -->
</div>
 
<!-- End Wrapper -->
 
  <!-- Begin Bottom Navigation -->
  <div id="bottom"> Navigation Here </div>
  <!-- End Bottom Navigation -->
 
  <!-- Begin Footer -->
 
  <div id="footer"> This is the Footer </div>
  <!-- End Footer -->
 
</body>
</html>

Here is a live preview of the problem.

Is it because I closed the container and then used clear:both so that the footer would be full-width? Thank you in advance for your help. Smile

Also, I'm using Firefox 3.6. I checked in Chrome and the problem still exists.

Top
Tags:
Thu, 2010-08-26 03:12
#1
Deuce
Deuce's picture
User offline. Last seen 3 days 17 hours ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2005-11-20
Posts: 4416
Points: 1835

Your #content div has a set

Your #content div has a set height. As a good rule of thumb, don't set heights.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Top
Fri, 2010-08-27 02:58
#2
Hecatologue
Hecatologue's picture
User offline. Last seen 1 year 23 weeks ago. Offline
newbie
Timezone: GMT-7
Joined: 2010-08-26
Posts: 2
Points: 5

Solved

This is what happens when you spend one too many hours at the computer. Thank you for pointing out that glaringly obvious problem, I appreciate it.

Top
  • Locked