Fri, 2006-03-31 19:12
SEE LAST REPLY FOR UPDATE
I have this image placed in a div (container div) that I set up to extend 100% down the page. Which seems to work well in Internet Explorer but alas, as you can see it does not work in Firefox.
CSS Code
body {
background: #C5D0D8 url(images/pattern.gif);
margin: 0px;
height: 100%;
}
#container {
height: 100%;
width: 760px;
background: url(images/background.gif);
margin: 0px auto;
min-height:100%;
position:relative;
}
#content {
width: 710px;
margin: 0px auto;
padding-top: 8px;
}
#leftcol{
width:230px;
float:left;
font-family: arial, verdana, sans-serif;
font-size: 12px;
}
#maincol {
margin-left: 250px;
width:457px;
font-family: arial, verdana, sans-serif;
font-size: 12px;
line-height: 175%;
}
IMG.center {
display: block;
margin-left: auto;
margin-right: auto;
}
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" id="sixapart-standard"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="Movable Type 3.2" /> <link rel="stylesheet" href="styles-site.css" type="text/css" /> <title>Suburbanette</title> </head> <body> <img src="images/header.gif" class="center" alt="pregnant header" /> <div id="container"> <div id="content"> <div id="leftcol">HELLO</div> <div id="maincol"><p>Update? So Soon? | February 16, 2006</p> <p>I hardly update much because pretty much things with my pregnancy have been going great. No problems have a risen (although I wake up with muscle pain oh joy!) and this pregnancy is pretty much moving along easily. A little too easy, I am just waiting for the "other shoe to drop" as the saying goes. What if I haven't had any complications because it is just setting me up for something big in the future? I tell you I am such a pessimist and worry wart.</p> <p>So my work place is shutting their doors (we are division of a bigger company but this division isn't getting enough work to stay home) at the very beginning of March, horror! But the upside is they have an at-home-position which would be perfect for someone in my situation. It's only part time but you get paid based on speed and accuracy and I am verifier so I think I can make a decent pay check. But I am still going to keep my options open.</p> <p>Wednesday I went for my 3rd pre-natal check up, it was pretty much your run of the mill visit. I did give up more of my blood to see if I have a chance to be the carrier of a child with down syndrome. I will know in 2 weeks the results and we will go from there. If they think there is a possibility I might end up getting an Amniocentesis which I really really really prefer not to happen. Oh and in one more month, March 20 to be exact, I get to go get an ultrasound and see what sex the baby is!!!!!!! I can't wait, a month seems so far away.</p> <p>P.S. My husband and I have gone to the dark side, we bought a . . . .</p> <p>A/K/A a gas guzzeling SUV. It is considered the family car but technically I like to look at it as my vehicle.</p></div> </div> </div> </body> </html>
Fri, 2006-03-31 19:24
#1
100% Height DIV Prolem
You should style on the html not just the body
html, body{height:100%;}
and add
body>#container{height:auto;}
for FF.
I think that should sort things out.
Hugo.
Fri, 2006-03-31 19:35
#2
100% Height DIV Prolem
Yep, thats what it needed to work in Firefox. Thanks very much.
Another question, lots of empty space at the end of the content, what gives?
Fri, 2006-03-31 19:42
#3
100% Height DIV Prolem
charlene2021 wrote:
Another question, lots of empty space at the end of the content, what gives?
? what space, I dont see any space at the bottom of content in FF or IE.
Hugo.
Fri, 2006-03-31 19:54
#4
100% Height DIV Prolem
Tue, 2006-04-04 23:03
#5
100% Height DIV Prolem
I messed something up so background doesn't extend when content on the left hand side is longer than the right hand side.
Reference Page
The edited code:
HTML CODE (cut out some 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" id="sixapart-standard"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="The personal website of suburban girl just trying to make it out of here alive." /> <meta name="keywords" content="photos, photography, personal, personal website, charlotte, north carolina" /> <link rel="stylesheet" href="http://www.suburbanette.net/styles-site.css" type="text/css" /> <title>Suburbanette</title> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.suburbanette.net/rsd.xml" /> </head> <body> <img src="/images/header.gif" class="center" alt="pregnant header" /> <div id="container"> <div id="content"> <div id="leftcol"><h3 class="margin">CONTENT</h3> <a class="nav" href="/index.php" title="Back To Main Page">Home</a> <a class="nav" href="/domain.php" title="About The Domain">Domain</a> <a class="nav" href="/about.php" title="About Me, The Owner">About</a> <a class="nav" href="/gallery" title="My Photographic Endeavors">Gallery</a> <a class="nav" href="/projects.php" title="Various Things I Am Working On">Projects</a> <a class="nav" href="/links.php" title="Links To Other Sites">Links</a> <a class="nav" href="/contact.php" title="Various Ways To Contact Me">Contact</a> <p> </p> </div> <div id="maincol"> <h3 class="upper">projects</h3> <p><a href="recipes">Recipes</a></p> <p><a href="resources.php">Web Design Resources</a></p> <p><a href="51states">The 51 States Project</a></p> <p><a href="louisvuitton">Louis Vuitton - Official Hatelisting</a></p> <p><a href="#">Front Line Assembly - Official Fanlisting</a> <strong>Coming Soon</strong></p> <p><a href="#">ListMania</a> <strong>Coming Soon</strong></p> <p> </p> </div> </div> </div> </body> </html>
MAIN CSS CODE
html, body {
background: #C5D0D8 url(images/pattern.gif);
margin: 0px;
height: 100%;
}
body>#container {
height:auto;
}
#container {
height: 100%;
width: 760px;
background: url(images/background.gif);
margin: 0px auto;
min-height:100%;
position:relative;
}
#content {
width: 710px;
margin: 0px auto;
padding-top: 8px;
}
#leftcol{
width:200px;
float:left;
font-family: arial, verdana, sans-serif;
font-size: 12px;
}
#maincol {
margin-left: 240px;
width:477px;
font-family: arial, verdana, sans-serif;
font-size: 12px;
line-height: 175%;
}
a.nav, a.nav:link, a.nav:visited {
display:block;
width:140px;
height:19px;
padding: 4px;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:11px;
color:#555D64;
line-height:25px;
overflow:hidden;
}
a.nav:hover {
color:#424A51;
font-weight: bold;
border-left: 5px solid #B8DB9F;
}
a.nav:active {
color:#424A51;
font-weight: bold;
}