"Stretching" a container to the bottom

Discussion in 'CSS' started by viRioL, Apr 18, 2008.

0
  1. #1
    Hi!
    Can anyone please help me to get my conainer #kontenta to get stretched down to the bottom of the browser window? I've tried to accomplish this in many different ways (eg. surrounding the whole page in new containers using this guide: http://www.xs4all.nl/~peterned/examples/csslayout1.html). It feels like I just want to give up.. :(

    This is how it looks:
    http://fotbollpatv.nu/1.jpg
    This is what I want:
    http://fotbollpatv.nu/2.jpg

    This is my XHTML:
    <!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=UTF-8" />
    <title>Om cookies p&aring; fotbolliveckan.nu</title>
    <meta http-equiv="Content-Language" content="sv" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="description" content="H&auml;r f&aring;r du snabbt och l&auml;tt reda p&aring; vilken tid och vilken kanal en fotbollsmatch visas p&aring; TV. En bra guide f&ouml;r dig som gillar fotboll." />
    <meta name="keywords" content="fotboll p&aring; tv,fotboll i veckan,fotboll,p&aring;,tv,i,veckan,nu,veckans,match,matcher,nyheter,inf&ouml;r,cup,live,idag,dagens,ikv&auml;ll,kv&auml;llens,brasilien,sveriges,mff,ppv,allsvenskan,aik,hammarby,djurg&aring;rden,manchester united,milan,liverpool,premier league,arsenal,chile,svensk,se" />
    <meta name="author" content="Viriol Design" />
    <!--[if lt IE 7]><script type="text/javascript" src="js/ie7.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="css/huvudcss.css" />
    <script type="text/javascript" src="js/huvudjs.js"></script>
    <script type="text/javascript" src="js/util-functions.js"></script>
    <script type="text/javascript" src="js/clear-default-text.js"></script>
  </head>
  <body>
    <div id="sidcontainer">
      <div id="logotype"><a href="index.php" name="toppen"><img src="bilder/logotype.gif" alt="fotbolliveckan.nu - Logotype" /></a></div>
      <div id="logotext"><img src="bilder/logotext.gif" alt="Text - Din b&auml;sta k&auml;lla till fotboll p&aring; TV!" /></div>
      <div id="meny">
        <a href="index.php" class="vitlank">HEM</a> |
        <a href="matcher.php" class="vitlank">MATCHER</a> |
        <a href="tipsa-om-match.php" class="vitlank">TIPSA OM MATCH!</a> |
        <a href="lankar.php" class="vitlank">L&Auml;NKAR</a> |
        <a href="kontakta.php" class="vitlank">KONTAKTA</a>
      </div>
      <div id="kontenta">
        <h1>OM COOKIES</h1>
        <p>Den h&auml;r webbplatsen inneh&aring;ller s&aring; kallade cookies (kakor). Enligt lagen om elektronisk kommunikation, som tr&auml;dde i kraft den 25 juli 2003, ska alla som bes&ouml;ker en webbplats med cookies f&aring; information om:</p>
        <ul>
          <li>att webbplatsen inneh&aring;ller cookies,</li>
          <li>vad dessa cookies anv&auml;nds till och</li>
          <li>hur cookies kan undvikas.</li>
        </ul>
        <p>P&aring; fotbolliveckan.nu kan det f&ouml;rekomma cookies fr&aring;n v&aring;ra annons&ouml;rer f&ouml;r att komma ih&aring;g att anv&auml;ndaren kommer ifr&aring;n oss.</p>
        <p>Vill du inte acceptera cookies kan din webbl&auml;sare st&auml;llas in s&aring; att du automatiskt nekar till lagring av cookies eller informeras varje g&aring;ng en webbplats beg&auml;r att f&aring; lagra en cookie. Genom webbl&auml;saren kan ocks&aring; tidigare lagrade cookies raderas. Se webbl&auml;sarens hj&auml;lpsidor f&ouml;r mer information.</p>
        <p>
          <a href="http://www.pts.se/Sidor/sida.asp?SectionId=1930">L&auml;s mer</a>
          om vad cookies &auml;r och vad lagen s&auml;ger
          <a href="http://www.pts.se/Sidor/sida.asp?SectionId=1930">h&auml;r</a>.
        </p>
        <div id="menynere">
          <p class="fotrubrik">fotbolliveckan<strong>.nu</strong></p>
          <p class="copytext">Copyright &copy; 2008</p>
          <a href="tipsa-om-match.php">Tipsa om match!</a> |
          <a href="kontakta.php">Kontakta</a> |
          <a href="om-cookies.php">Om cookies</a> |
          <a href="http://validator.w3.org/check?uri=referer">XHTML</a> |
          <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
        </div>
      </div>
      <div id="annonsfalt">
        <script type="text/javascript">
          <!--
          google_ad_client = "pub-6274915516041649";
          /* 160x600, skapad 2008-04-15 */
          google_ad_slot = "7618544335";
          google_ad_width = 160;
          google_ad_height = 600;
          //-->
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
      </div>
    </div>
    <script type="text/javascript">
      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
      var pageTracker = _gat._getTracker("UA-4131411-1");
      pageTracker._initData();
      pageTracker._trackPageview();
    </script>
    <script type="text/javascript">
      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
      var pageTracker = _gat._getTracker("UA-4132765-1");
      pageTracker._initData();
      pageTracker._trackPageview();
    </script>
  </body>
</html>
    HTML:
    This is my CSS:
    html, body {
  margin: 0;
  padding: 0;
  background: #a0a0a0
              url(../bilder/bakgrund.jpg)
              repeat-x;
  /* Textinställningar */
  font-family: Georgia, Tahoma, Arial, Helvetica, Verdana, Sans-serif;
}

/* Länkinställningar */
a:link, a:visited {
  color: #004000;
  text-decoration: none;
}

a:hover, a:active {
  color: green;
  text-decoration: underline;
}

form {
  margin: 0;
}

h1 {
  margin: 0;
  margin-bottom: 8px;
  /* Textinställningar */
  font-size: 18px;
}

h2 {
  margin: 0;
  /* Textinställningar */
  font-size: 18px;
}

h3 {
  margin: 0;
  /* Textinställningar */
  font-size: 12px;
}

hr {
  width: 50%;
  height: 1px;
  margin-top: 24px;
  margin-bottom: 8px;
  background-color: green;
  color: green;
  border: 0;
}

img {
  border: 0;
}

input, select, textarea {
  background-color: white;
  color: green;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-bottom: 8px;
}

textarea {
  width: 50%;
}

#sidcontainer {
  /* Ändra detta värde till sidans totalbredd i pixlar */
  width: 944px;
  margin-left: 16px;
}

#logotype {
  width: 384px;
  height: 224px;
  float: left;
  /* Textinställningar */
  text-align: center;
}

#logotext {
  width: 384px;
  height: 224px;
  float: left;
  /* Textinställningar */
  text-align: center;
}

#meny {
  width: 752px;
  height: 16px;
  padding: 8px;
  clear: both;
  background: url(../bilder/meny.gif);
  /* Textinställningar */
  font-family: Tahoma, Arial, Helvetica, Verdana, Sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

#adminmeny {
  width: 752px;
  height: 15px;
  padding: 8px;
  padding-top: 9px;
  clear: both;
  background: url(../bilder/meny.gif);
  /* Textinställningar */
  font-family: Tahoma, Arial, Helvetica, Verdana, Sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: white;
}

/* Länkinställningar för menyn */
a.vitlank:link, a.vitlank:visited {
  color: white;
  text-decoration: none;
}

a.vitlank:hover, a.vitlank:active {
  color: white;
  text-decoration: underline;
}

#kontenta {
  width: 752px;
  margin-top: 16px;
  margin-right: 16px;
  padding: 8px;
  float: left;
  background: white
              url(../bilder/kontenta.gif)
              no-repeat;
  /* Textinställningar */
  font-size: 12px;
  color: green;
}

#valkommen {
  width: 752px;
  height: 32px;
  margin-bottom: 8px;
  float: left;
  background: url(../bilder/valkommenbg.gif);
  /* Textinställningar */
  text-align: center;
}

#hejoch {
  width: 364px;
  height: 120px;
  margin-right: 8px;
  padding: 4px;
  float: left;
  background: url(../bilder/ladbg.gif)
              no-repeat;
  /* Textinställningar */
  font-family: Tahoma, Arial, Helvetica, Verdana, Sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: white;
}

#matcheridag {
  width: 364px;
  height: 120px;
  margin-bottom: 8px;
  padding: 4px;
  float: left;
  position: relative;
  background: url(../bilder/ladbg.gif)
              no-repeat;
  /* Textinställningar */
  font-family: Tahoma, Arial, Helvetica, Verdana, Sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: white;
}

div#hejoch img, div#matcheridag img {
  margin-bottom: 11px;
}

div#matcheridag span {
  float: left;
}

div#matcheridag span.hoger {
  float: right;
}

div#matcheridag span.hogerhornet {
  clear: both;
  position: absolute;
  right: 4px;
  bottom: 7px;
}

#nyheter {
  width: 658px;
  clear: both;
}

#menynere {
  width: 752px;
  padding-top: 16px;
  clear: both;
  /* Textinställningar */
  font-family: Tahoma, Arial, Helvetica, Verdana, Sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}

div#menynere p {
  margin: 0;
}

div#menynere p.copytext {
  margin-bottom: 8px;
}

div#menynere p.fotrubrik {
  /* Textinställningar */
  font-size: 12px;
}

div#menynere strong {
  /* Textinställningar */
  color: black;
}

#annonsfalt {
  margin-top: 16px;
  float: left;
}

.dag {
  margin-top: 24px;
  margin-bottom: 8px;
  float: left;
  /* Textinställningar */
  font-family: Tahoma, Arial, Helvetica, Verdana, Sans-serif;
}

div.dag h2 {
  float: left;
}

div.dag span.hoger {
  margin-top: 8px;
  float: right;
}

.kanal {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  float: left;
}

.liga {
  width: 752px;
  height: 40px;
  margin-bottom: 8px;
  clear: both;
}

.match {
  width: 696px;
  height: 20px;
  margin-bottom: 8px;
  padding: 8px;
  padding-top: 12px;
  float: left;
  /* Textinställningar */
  font-family: Tahoma, Arial, Helvetica, Verdana, Sans-serif;
}
    Code (markup):
    I would really appreciate it alot if anyone could help me out!
    Thanks!
     
    viRioL, Apr 18, 2008 IP
  2. jordanthegreat

    jordanthegreat Active Member

    Messages:
    390
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #2
    you need to apply height:100% to all container divs including body. so:

    
html, body {
  height:100%;
}

#sidcontainer {
  height:100%;
}

#kontenta {
  height:100%;
}
    Code (markup):
     
    jordanthegreat, Apr 19, 2008 IP
  3. CreamStash

    CreamStash Banned

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yes his solution works out pretty well in this situation.
     
    CreamStash, Apr 19, 2008 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Dan Schulz, Apr 23, 2008 IP