On 3/28/06, john [EMAIL-REMOVED]> wrote:
> Hello. I'm kinda new here, although I've been reading the list from
> time to time when I've been needing some help. Now it's time for me
> to ask a question. :)
> I'm feeling like I'm having some kind of brain lapse...as if I really
> should know how to do this, but it's just not coming to me.
> I'd like to use the Silver Orange tabs example as an idea for a site
> I'm working on, but I would like to create a column on the left that
> spans from top to bottom and expands vertically with the rest of it.
> Here's the template:
> Can somebody please help me with this? Thanks.
> This message was typed on
> a 100% recycled keyboard.
> css-discuss [EMAIL-REMOVED]]
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
I've been trying to do the same kind of thing for a while. I get stuck
on the top to bottom column. I still don't know how to do it right,
but here is what I tried:
a) height:100% applied to html, body and the div that should span top
to bottom. If the div is inside a container div, then that one too
needs height:100%. Also, you might want to add max-height:100% for
This method seems to work slightly better than most. It does span at
very least a full viewport on mozilla browsers, and actually work
perfectly with IE6/Win. However, this is not a valid way of doing it
and should not be depended upon. Basically it takes advantage of
browser glitches in handling the 100% value. (which is a width value
actually applied to height)
b) If you just want a background going down the side of the page, (and
can have the div a specific height if the content of it does not
change) you can just apply the background image to the html tag and do
repeat-y. The image should be the width you want the div to be, plus
padding. Just make it 150px by 1px or whatever. So long as you use
repeat-y, there is no need to burden yourself with more than 1px
height. And this saves on load time too as filesize is smaller. This
actually works, but only for this specific case. And make sure to
remove all padding and margins to both the html and body tags, if not
the background with be offset.
c) You can try the same as above but applying the background image to
the body tag. This works in IE and not it Moz.
d) I've though about also getting some kind of container div over the
entire page, making it 100% height, applying your background to that
and creating your div as height 100% in the scope of said container.
The idea is that the container will expand with the content and thus
will expand the bar too. Haven't actually tried it but it's the only
thing I could think up that made any sense in the past 3 days.
But don't worry. There must be a way to do it. The fact still remains,
there should be an easier way to do this considering it's a fairly
common thing to want to do. If I find anything else I will notify you.
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/