Codegrrl.com Forums > [resolved] 100% height problem

Full Version: [resolved] 100% height problem

Codegrrl.com Forums > Languages > HTML and CSS

Jaina

Mar 24 2008, 05:13 PM

I'm tearing my hair out trying to figure out what i can do to fix this problem.

I've just created a new more CSS driven layout for http://jewel-staite.net.

As you can see there's a white div that acts as a background which should stretch the entire contents of the page. And it does in IE however not in Firefox. In firefox it stretches to the viewable screen size and no more.

I've hunted around the net and can't seem to find a solution that will help me here, so any of you gals help out?

Here's my CSS:

CODE

* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}

body {
    background-image:url(images/graphics/v2_bg_01.jpg);
    background-repeat:repeat-x;
    margin:0px;
    padding:0px;
    background-color:#c0c0c0;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 75%;
}

#textarea a:link {
    color:#761414;
    font-weight:bold;
    text-decoration:none;
    border-bottom: 1px dotted #761414;
}

#textarea a:visited {
    color:#929292;
    text-decoration:none;
}

#textarea a:hover {
    border-bottom: 1px solid #761414;
}

h1 {
    color:#821717;
    font-size: 2.5em;
    border-bottom: 1px dotted #821717;
    margin-bottom: 4px;
}

h2 {
    color:#821717;
    font-size: 1.5em;
    border-bottom: 1px dotted #821717;
    margin-bottom: 4px;
}

#container {
    min-height:100%;
    margin: 0 auto;
    width:850px;
    background-color:#fff;
    text-align:left;
}

* html #container {
    height: 100%;
}

#header {
    width: 850px;
    height: 256px;
    background-image:url(images/graphics/v2_01.jpg);
}

#menu {
    margin: 0px;
    padding:0px;
    height:40px;
    background-image:url(images/graphics/v2_headerbg_01.jpg);
}

#textarea {
    width:835px;
    padding: 10px;
    margin: 0px;
    text-align:left;
}

#bodytext {
    width: 490px;
    float:left;
    text-align:left;
}

#bodytext ul, li {
    list-style-position:inside;
}

.subdesc {
    font-size: 0.8em;
    color:#922929;
}

.wallpapersicons {
background-color: #6D6D6D;
}

.filmography {
    background-color: #6D6D6D;
    font-weight: bold;
    padding: 2px;
    color:#fff;
}

.news {
    width:490px;
    float:left;
    background-color:#c0c0c0;
    margin-bottom: 10px;
}

.news_headline {
    width: 324px;
    float:left;
    background-color:#570c0c;
    padding: 4px;
}

.news_headline h3 {
    color:#fff;
    font-size: 1.2em;
}

.news_date {
    width:150px;
    float:right;
    text-align:right;
    background-color:#570c0c;
    padding: 4px;
    color:#fff;
    font-size: 1.2em;
}

.news_body {
    padding: 4px;
}

.news_footer {
    background-color:#eaeaea;
    padding:4px;
    border-top: 1px dotted #838383;
    color:#912828;
    font-size: 0.8em;
    font-weight:bold;
}

#googlead {
    margin: 0 auto;
    width: 728px;
    text-align:center;
}

#sidebar {
    width: 275px;
    float: right;
    font-size: 0.8em;
    text-align:left;
    height:100%;
}

.sidebar_box {
    background-color:#eaeaea;
    padding: 4px;
    margin-bottom: 5px;
}

#sidebar h1 {
    float: right;
    font-size: 1.1em;
    display: block;
    background-color:#6b1616;
    width: 260px;
    color:#fff;
    padding: 4px;
    text-align:center;
    text-transform:uppercase;
    margin-bottom:3px;
}

#sidebar ul li {
    list-style-position:inside;
}

.spacer {
    height:1px;
    clear:both;
}

textarea {
    background-color:#eaeaea;
    padding: 4px;
    color: #000;
    border: none;
}

input {
    background-color:#eaeaea;
    padding: 4px;
    color: #000;
    border: none;
}

select {
    background-color:#eaeaea;
    padding: 4px;
    color: #000;
    border: none;
}

Jamie

Mar 24 2008, 05:36 PM

If you had a div right above your closing div tag for the container

CODE

<div id="footer">
Put what you want here... contact link, copyright, whatever
</div>

And then in your stylesheet add:

CODE

#footer {
clear:both;
}

It should work

For more info see This Tutorial

Jaina

Mar 24 2008, 06:18 PM

ahh! so simple! and here i was looking at CSS hacks, thinking they're looking really ugly and i want to do something simple.

Thanks so much jamie

Jamie

Mar 24 2008, 10:54 PM

You're welcome

Vlad

Apr 5 2008, 04:18 PM

The same problem. But I've used claer: both
css

CODE

body {
background: url(images/bg.gif);
margin: 0;
padding: 0;
height: 100%;
}
/* layout */
#container {
width: 788px;
background: url(images/mainbg.gif) center top repeat-y;
margin: 0 auto;
padding: 0;
height: 100%;
}
#header {
width: 788px;
height: 261px;
background: url(images/header.gif) center top no-repeat;
}
#texts {
width: 500px;
height: 100%;
}
#footer {
clear: both
}

html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="AFFLiCTiON">
<meta name="generator" content="AceHTML 5 Pro">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div id="container">
<div id="header"></div>
<div id="texts"><p height="100%">Me</p>
</div>
<div id="footer">bla</div>
</div>

</body>
</html>

Jamie

Apr 5 2008, 05:02 PM

QUOTE(Jamie @ Mar 24 2008, 12:36 PM)

And then in your stylesheet add:

CODE

#footer {
clear:both;
}

It should work

For more info see This Tutorial

That's what I told her to use too.

Vlad

Apr 5 2008, 05:33 PM

But, it is already in the stylesheet. I've cited the stylesheet code above.

But still the layout doesn't stretch

Birgit

Apr 5 2008, 06:04 PM

It's not the same problem, Jaina wanted a background to stretch the entire height of a two coloumn layout, while you want a layout with a 100% height in the viewport. Please see this example:

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

Vlad

Apr 5 2008, 06:17 PM

Oh! That is what I was searching for. Thnx

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.