[shmerek]

Does anybody know how to make columns with style sheets so they stretch depending on the browser window size? There are lots of tutorials out there but none of their columns seem to do what I want.. These are the parameters I have in the for the columns:
#left
{
width: 100%;
height: 100%;
float: left;

}
#right
{
width: 60px;
height: 100%;
float: right;

but that doesn't work. Am I totally retarded? Can somebody point me in the right direction. The only sites that I have found that do have columns that stretch the whole length of the page all seem to use external style sheets so I can never look at their fricking code.

[Millennium]

Try setting height:100% on the HTML tag (not the body tag; I'm talking about the HTML tag at the root of the document).

[Millennium]

Oh, and if you want to look at the source for an external stylesheet, just point your browser at the URL given in the LINK tag that binds the document to the stylesheet you're looking for. Most browsers will grab the CSS source and render it as plain text.

[ism]

This isn't really supported in css2. Setting a height of 100% sets the element height to 100% of the containing element, and they isn't any element that is 'the browser window' as such.

It might work by accident in some browsers. Maybe in css3 you'll have it...

[Millennium]

Originally posted by ism:
<STRONG>This isn't really supported in css2. Setting a height of 100% sets the element height to 100% of the containing element, and they isn't any element that is 'the browser window' as such.

It might work by accident in some browsers. Maybe in css3 you'll have it...</STRONG>

Although "the browser window" is not an element as such, it does play a role: that of the viewport.

There's some debate as to whether or not the viewport should be considered a containing block, and if it is, whether or not its height should be considered "explicitly set" for purposes of determining how high it is. Personally, I'm with Microsoft (and apparently Mozilla) on that one: of course it's a containing block, and its height and width are explicitly set, perhaps not by the stylesheet, but certainly by the browser itself. So by setting the HTML tag's height to 100%, you manage to get around the issue.

Ot so it seems. I'm going to have to look into it a bit more first, just to make sure of this.

[Simon Mundy]

Originally posted by shmerek:
<STRONG>The only sites that I have found that do have columns that stretch the whole length of the page all seem to use external style sheets so I can never look at their fricking code. </STRONG>

Have a look at the source code where it says &lt; link rel="stylesheet" href="/stylesheets/common.css" &gt;

If you're at www.company.com, then just retype in your address line www.company.com/stylesheets/common.css - then you'll see what you're after!

100% depths have never, ever worked for the mac. Go blame the mac business unit at microsoft and any netscape engineer.

My advice is to change your design, unfortunately.

[registered_user]

You could always make prodigous use of the &lt;br&gt; tag.

Like this:

&lt;br&gt;&lt;br&gt;&lt;br& ;gt;&lt;br&gt;&lt;br&gt;&lt;br &gt;&lt;br&gt;&lt;br&gt;&l t;br&gt;&lt;br&gt;&lt;br&gt;&a mp;lt;br&gt;&lt;br&gt;&lt;br&g t;&lt;br&gt;&lt;br&gt;&lt;br&a mp;gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br& ;gt;&lt;br&gt;&lt;br&gt;&lt;br &gt;&lt;br&gt;&lt;br&gt;&l t;br&gt;&lt;br&gt;&lt;br&gt;&a mp;lt;br&gt;&lt;br&gt;&lt;br&g t;&lt;br&gt;&lt;br&gt;&lt;br&a mp;gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br& ;gt;&lt;br&gt;&lt;br&gt;&lt;br &gt;&lt;br&gt;&lt;br&gt;&l t;br&gt;&lt;br&gt;&lt;br&gt;&a mp;lt;br&gt;&lt;br&gt;&lt;br&g t;&lt;br&gt;&lt;br&gt;&lt;br&a mp;gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br& ;gt;&lt;br&gt;&lt;br&gt;&lt;br &gt;&lt;br&gt;&lt;br&gt;&l t;br&gt;&lt;br&gt;&lt;br&gt;&a mp;lt;br&gt;&lt;br&gt;&lt;br&g t;&lt;br&gt;&lt;br&gt;&lt;br&a mp;gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br& ;gt;&lt;br&gt;&lt;br&gt;&lt;br &gt;&lt;br&gt;&lt;br&gt;&l t;br&gt;&lt;br&gt;&lt;br&gt;&a mp;lt;br&gt;&lt;br&gt;&lt;br&g t;&lt;br&gt;&lt;br&gt;&lt;br&a mp;gt;&lt;br&gt;

That ought to stretch your column to the full height of the window.

[philzilla]

Originally posted by registered_user:
<STRONG>You could always make prodigous use of the &lt;br&gt; tag.</STRONG>

don't be daft

[shmerek]

Thanks for all the suggestions perhaps I will rethink the design.

[registered_user]

Originally posted by philzilla:
<STRONG>

don't be daft</STRONG>

Don't be an ass. What is daft about that suggestion? It works. Whether you're too good for it or not is another issue. Do you have a suggestion to offer?

If the &lt;br&gt; isn't to your liking, you can always set a clear pixel to 800 px high. That would probably do the trick too.

[philzilla]

Originally posted by registered_user:
<STRONG>

Don't be an ass. What is daft about that suggestion? It works. Whether you're too good for it or not is another issue. Do you have a suggestion to offer?

If the &lt;br&gt; isn't to your liking, you can always set a clear pixel to 800 px high. That would probably do the trick too.</STRONG>

so an 800 high pixel would make it full length on a 1280 res screen? how about all those breaks scrolling off a 640 res screen?

hmm...

[registered_user]

phil, do you have anything constructive to add? I post here trying to help this guy with a quick and dirty work-around and you share insults. Real classy.

Make the clear pixel 2 million pixels high for all I care. that way it'll scroll down forever on any monitor your audience is likely to use.

Or, if shmerek is truly needing to make a column the exact height of the window, it's going to rely on some more advanced JavaScript. That Script will need to be fitted with if/then statements to determine the user's browser, and then determine the window's live area. Using that information, shmerek could write an additional Javascript that would write a clear pixel or perhaps a &lt;div&gt; in to the page as it loads. Then, there's need for yet another script to tell the page to reload if the window is resized. Is that what you wanted to hear, phil? Or is that daft too?

So, phil, I ask again, do you have anything constructive to add?

[philzilla]

Does anybody know how to make columns with style sheets so they stretch depending on the browser window size?

as an answer to the above question, using all those break tags is not viable. that's like making a table an exact number of pixels to do the same job, because it looks good on your screen. change the resolution and it's going to look different. making it's height 100% with valign=top would be the better thing to do.

is that constructive enough for you?

[Simon Mundy]

Originally posted by registered_user:
<STRONG>phil, do you have anything constructive to add? I post here trying to help this guy with a quick and dirty work-around and you share insults. Real classy.

Make the clear pixel 2 million pixels high for all I care. that way it'll scroll down forever on any monitor your audience is likely to use.

Or, if shmerek is truly needing to make a column the exact height of the window, it's going to rely on some more advanced JavaScript. That Script will need to be fitted with if/then statements to determine the user's browser, and then determine the window's live area. Using that information, shmerek could write an additional Javascript that would write a clear pixel or perhaps a &lt;div&gt; in to the page as it loads. Then, there's need for yet another script to tell the page to reload if the window is resized. Is that what you wanted to hear, phil? Or is that daft too?

So, phil, I ask again, do you have anything constructive to add?</STRONG>

Now that's not what I'd call an insult - more of a gentle reality check.

A whole heap of &lt; br &gt;'s is just messy coding and (as noted) would cause far too much scrolling. Javascript is going to work on about 80% of browsers but be a nightmare to code and debug. CSS should have worked, but ... well you know the story.

The last 2 hacks I can think of (which I wouldn't recommend) is to either:

a) Put a fixed frame inside a 'stretchy' frameset so you know the exact height of your layout

b) Put a javascript detect in the page which launches your page into a new window at a fixed size,

(b) Won't work if the use has Javascript disabled, (a) is just messy. Framesets AAARGGHHHH!!!!

Anyway, hope this helps your planning, shmerek!

[registered_user]

Originally posted by philzilla:
<STRONG>as an answer to the above question, using all those break tags is not viable. that's like making a table an exact number of pixels to do the same job, because it looks good on your screen. change the resolution and it's going to look different. making it's height 100% with valign=top would be the better thing to do. </STRONG>

Setting the height to 100% in not valid html, and it only works on some browsers because some browsers accept this additional off-spec code. That was mentioned above. It's also "sloppy-coding," and moreso, it won't work on every browser regardless of resolution.

Using a bunch of &lt;br&gt; tags isn't a perfect solution, it's a workaround. The only minus to &lt;br&gt; tags is that there is empty space at the bottom of the page, but it still forces the columns to the bottom of the page regardless of JavaScript preferences. It's not that bad of a trade-off. In fact, these very boards scroll for a few empty pages at the bottom.

The &lt;br&gt; technique, IMO, is second only to an invisible gif set to a huge height. Only 13% (ish) of surfers are using 640x480, the bulk are around 800x600, and you'd be hard pressed to find anyone with a display height above 1200 px. So set a gif to1200 px high to guarantee the column height, I said 800 earlier, and perhaps that wouldn't be high enough.

[philzilla]

Originally posted by registered_user:
<STRONG>Setting the height to 100% in not valid html, and it only works on some browsers because some browsers accept this additional off-spec code. That was mentioned above. It's also "sloppy-coding," and moreso, it won't work on every browser regardless of resolution.
</STRONG>

how do you explain this then? it's made quite clear there, that you can use a percentage

[Simon Mundy]

Originally posted by philzilla:
<STRONG>

how do you explain this then? it's made quite clear there, that you can use a percentage</STRONG>

Indeed, it IS valid HTML, but you won't get cross-browser, cross-platform consistency.

[registered_user]

Originally posted by philzilla:
<STRONG>

how do you explain this then?</STRONG>

Well apart from a concise reply such as "don't be daft," I'd explain it by saying that the height attribute itself (regardless of the measure) is only valid for images and embedded objects, not divisions or tables. So, no, your table suggestion is still bad code, but the good thing about this is that I didn't know that a height percentage was applicable to images. So, it does make the clear pixel idea a tasty trick.

[Millennium]

Originally posted by philzilla:
<STRONG>how do you explain this then? it's made quite clear there, that you can use a percentage</STRONG>

Um, that's not the appropriate URL. The one you want is http://www.w3.org/TR/html4/struct/ta...tml#edef-TABLE .
And here, we see that it's not valid HTML. Not because of the percentage thing, but because there is no "height" attribute in valid HTML, not even Transitional. That's an IE thing.

[shmerek]

Originally posted by registered_user:
<STRONG>

Well apart from a concise reply such as "don't be daft," I'd explain it by saying that the height attribute itself (regardless of the measure) is only valid for images and embedded objects, not divisions or tables. So, no, your table suggestion is still bad code, but the good thing about this is that I didn't know that a height percentage was applicable to images. So, it does make the clear pixel idea a tasty trick.</STRONG>

So If I made a clear pixel gif chucked it in a column and set the gif height to 100% it would make he column fir the window size? Would that actually work?

[Millennium]

Originally posted by shmerek:
<STRONG>So If I made a clear pixel gif chucked it in a column and set the gif height to 100% it would make he column fir the window size? Would that actually work?</STRONG>

Unless I'm mistaken, the height attribute on images isn't relative to the size of the window; it's relative to the true size of the image. So if you did this, the one-pixel gif would still be one pixel high.

[registered_user]

Originally posted by shmerek:
<STRONG>

So If I made a clear pixel gif chucked it in a column and set the gif height to 100% it would make he column fir the window size? Would that actually work?</STRONG>

I tested it in IE 5 and NS6 and it worked for me.

[shmerek]

Originally posted by registered_user:
<STRONG>

I tested it in IE 5 and NS6 and it worked for me.</STRONG>

Cool I will give that a try sort of an enhanced spacer gif.