Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I have googled the world looking for a solution to a very stupid problem. I am trying to get two divs to run the full length of content contained in a third, center div. They behave fine in IE (odd) but not in FF and it is driving me nutty. No matter how long the center column/div is the right and left divs (which exist simply to hold small gifs that give the center div a shadow effect) refuse (in FF) to extend more than about 1000px. If I change the height in the R and L divs to more than 100% they grow but I want the height to be organic not fixed. I have tried changing doctypes I have tried max- and min-height, I have tried various nesting schemes, all to no avail. Here is the basic code ( have removed the content for the sake of saving space here but suffice it to say that it has no effect on the height of the R and L divs) :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--<LINK href="/test.css" rel="stylesheet" type="text/css">-->
<style>
<!--
html, body
{
height: 100%;
min-height: 100%;
max-height: 100%;
}
#header
{
background-image: url(/images/resume_bookend.gif);
background-repeat: no-repeat;
height: 53px;
float: left;
position: absolute;
width: 650px;
margin-left: -12px;
}
#main
{
float: left;
position: absolute;
height: 100%;
margin-top: 53px;
}
#left
{
height: 100%;
min-height: 100%;
max-height: 100%;
float: left;
position: relative;
width: 10px;
background-image: url(/images/resume_bevel_left.gif);
margin: auto
}
#center
{
height: 100%;
min-height: 100%;
max-height: 100%;
float: left;
position: relative;
width: 616px;
display: block;
}
#right
{
height: 100%;
min-height: 100%;
max-height: 100%;
float: left;
position: relative;
width: 15px;
background-image: url(/images/resume_bevel_right.gif);
}
-->
</style>
</head>
<body>
<div id=header></div>
<div id=main>
<div id=left></div>
<div id=center>
</div>
<div id=right></div>
</div>
</body>
</html>
Please help! -
suggestions:
1- take out the "max-height: 100%;" on things (This effectively says to FF "the object in question can never be taller than the height of the browser window" if i understand it correctly.)
2- on the html/body section try this:html, body {
height:auto !important; /* FF and compliant browsers should automatically size the body/html */
height:100%; /* ie will set the body/html to 100%, anything overflowing that will (incorrectly) resize it. go IE */
min-height:100%; /* when FF/etc automatically size the body/html it should be AT LEAST the height of the entire browser window, but can expand based on content. */
} -
- CommentAuthorNick Presta
- CommentTimeFeb 19th 2006
http://infinity-stuff.com
html { height: 100%; }
body { min-height: 100%; height: 100%; }
That should work fine. -
Thanks Nick!
Good thing this is easily googled, I keep forgetting this little bit all the time! -
- CommentAuthorzakirsaleem
- CommentTimeJul 2nd 2010
this works ok when my resolution is 1280*1024 but when i lower down the resolutions, the height does not seem to take effect.... height of right pan that i sorted out through this article again changes.
1 to 5 of 5