Forum Moderators: not2easy

Message Too Old, No Replies

"Stretching" a container to the bottom

         

viRioL

4:08 am on Apr 19, 2008 (gmt 0)

10+ Year Member



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: www.xs4all.nl/~peterned/examples/csslayout1.html). It feels like I just want to give up.. :(

This is how it looks: <>
This is what I want: <>

My doctype is:
XHTML 1.0 Transitional

This is a stripped down version of my XHTML:


<body>
<div id="sidcontainer">
<div id="logotype"><img src="bilder/logotype.gif" /></div>
<div id="logotext"><img src="bilder/logotext.gif" /></div>
<div id="meny">
<a href="index.php">HEM</a> ¦
<a href="matcher.php">MATCHER</a> ¦
<a href="tipsa-om-match.php">TIPSA OM MATCH!</a> ¦
<a href="lankar.php">L&Auml;NKAR</a> ¦
<a href="kontakta.php">KONTAKTA</a>
</div>
<div id="kontenta">
<h1>OM COOKIES</h1>
<p>Den h&auml;r...</p>
<div id="menynere">
<p>fotbolliveckan<strong>.nu</strong></p>
<p>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-0123012301230123";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
</div>
</body>

This is a stripped down version of 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;
}

#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;
}

#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;
}

#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;
}

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

I would really appreciate it alot if anyone could help me out!
Thanks!

[edited by: SuzyUK at 8:19 am (utc) on April 19, 2008]
[edit reason] sorry no personal links, see charter [/edit]

daddysblogs

4:56 pm on Apr 19, 2008 (gmt 0)

10+ Year Member



I'm having this same issue right now for our mens online magazine. The site looks great but I can't seem to get the main page container DIV to stretch vertically with the content of the page. Does anyone know the proper CSS cross browser coding for this? this would be helpful as the bottom of the site looks quite unattractive right now.

[edited by: jatar_k at 6:15 pm (utc) on April 19, 2008]
[edit reason] no urls thanks [/edit]

reptillian

7:07 am on Apr 28, 2008 (gmt 0)

10+ Year Member



Hi,

you can stretch a container vertically by putting default content inside the contained divs. A 400px high jpeg for a navbar background could do the trick to stretch it at least 400px.

There must be other ways too. On the general you want a flexible container, so it stretches as content flows in. One way to putting some content at a "blank" container site is to build a really high footer.

Finally you can try using height for the container, but i am not sure if that has the desired effect, at least not cross browser imho.

best

rept

dukelips

8:54 am on Apr 28, 2008 (gmt 0)

10+ Year Member



y not faux columns