Matt Dawson wrote:
Still, if you ever end up with a page where there is a small amount
of content - especially on a big screen - that container will still
stretch to the bottom of the page, leaving a largely empty column.
In such a case one will indeed end up with a largely empty column on
Here's the URL:
www.objectivedesigns.com/2
Everything is correct in FF and Opera, but IE shifts the container/header
one pixel to the left. You can see it if you look closely and compare the
edges in relation to the background gradients.
Also, I want the black left and right borders of the
I'm not sure if this will actually fix your problem, but I think you
intended to place your text-align: center declaration on the body, not on
the container. (That is, I think you intend to use this to correctly center
your layout for IE 5. If that's the case, put it on the body element
instead.)
| ...place your text-align: center
| declaration on the body, not on the container. (That is, I
| think you intend to use this to correctly center your layout
| for IE 5. If that's the case, put it on the body element
| instead.) That *might* fix your problem.
|
| ...shrink the image by two
Sadly, none of that did anything to fix the problem. Any ideas on making
the
container extend down to 100% of the vertical space?
Well, for starters, you might want to think about changing your use of that
background image. If you make the container div wide enough to contain the
image bg
Daniel Hammond wrote:
Any ideas on making the container extend down to 100% of the vertical
space?
Try adding...
html, body {height: 100%;}
#container {min-height: 100%;}
* html #container {height: 100%;}
...and restyle the background to avoid visible overflow...
html, body {background:
Daniel Hammond wrote:
Sadly, none of that did anything to fix the problem. Any ideas on making the
container extend down to 100% of the vertical space?
Keep in mind that once you have content in the page this will probably
become a non-issue. I wouldn't worry about it.
Zoe
--
Zoe M.
| Try adding...
| html, body {height: 100%;}
| #container {min-height: 100%;}
| * html #container {height: 100%;}
| ...and restyle the background to avoid visible overflow...
| html, body {background: #fff url(../images/bg.jpg) center repeat-y; }
Perfect. That took care of both of my issues.
Still, if you ever end up with a page where there is a small amount of
content - especially on a big screen - that container will still stretch to
the bottom of the page, leaving a largely empty column.
...but I'm glad it's working!
Try adding...
html, body {height: 100%;}
#container
