CSS div height 100% ??

[Nico Schuyt]

The last couple of hours I desperately tried to give a div containing a menu
the same height as the div with the content.
In standard mode it's not a problem buth with doctype 'strict' I fail.
Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
The height of the left (menu) div however is not more than the height of the
screen.

Your help is appreciated!
Nico

 

[John W.]

The last couple of hours I desperately tried to give a div containing a menu
the same height as the div with the content.
In standard mode it's not a problem buth with doctype 'strict' I fail.
Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
The height of the left (menu) div however is not more than the height of the
screen.

You looked with IE, in Moz + O it's worse :-(


John OO

 

[picayunish]

Nico Schuyt wrote in news:[email protected]:

The last couple of hours I desperately tried to give a div containing a
menu the same height as the div with the content.
In standard mode it's not a problem buth with doctype 'strict' I fail.
Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
The height of the left (menu) div however is not more than the height of
the screen.

Your help is appreciated!

Correct me when I'm wrong.
When using 100% for the height or width it means the maximum height or
width of the browser window that the visitor has set. In your case try to
use a height of 253% or try using em for height.

 

[rf]

The last couple of hours I desperately tried to give a div containing a menu
the same height as the div with the content.
In standard mode it's not a problem buth with doctype 'strict' I fail.
Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
The height of the left (menu) div however is not more than the height of the
screen.

Your help is appreciated!

The general consensus is that this can't be done without resorting to CSS
tables which, of course, don't work on a certain high profile browser.

There are some suggested workarounds, mainly involving backgrounds, so it
"looks" like the left hand div extends to the bottom of the content.

Here is a page where I was experimenting with it. The middle bit is what you
are after. Fiddle around with those commented out borders to see what is
hapenning.

http://users.bigpond.net.au/rf/html/notable.html

Cheers
Richard.

 

[Wayne D Hammond]

The last couple of hours I desperately tried to give a div containing a menu
the same height as the div with the content.
In standard mode it's not a problem buth with doctype 'strict' I fail.
Best result so far: http://www.nicoschuyt.nl/test/div_100_1.htm
The height of the left (menu) div however is not more than the height of the
screen.

Your help is appreciated!
Nico

The height is the same using Mozilla 1.5

 

[Eric B. Bednarz]

Use a table. DIV-soup isn't any better.

I wouldn't use float in the first place; anyway, you are trying to make
things far too complicated. Quick and lazy:

The general consensus is that this can't be done without resorting to CSS
tables which, of course, don't work on a certain high profile browser.

Too bad I've missed that.

By the way, random markup is only needed for the high profile browser to
accomplish such an effect.

<http://sandbox.bednarz.nl/css/height/cols.html>

(there are some possible problems with narrow windows/large font sizes
if viewed with MSIE because of the URI string at the bottom, something
I'm currently to lazy to fix, but that's unrelated to the OP's query)

 

[Nico Schuyt]

Use a table. DIV-soup isn't any better.

Maybe you're right

I wouldn't use float in the first place; anyway, you are trying to
make things far too complicated. Quick and lazy:
http://sandbox.bednarz.nl/css/height/float.html

So, one column instead of two. I must admit I didn't think of that!
In this particular case I thought I needed two columns in order to show the
possibilities of CSS (e.g change the order of the columns: menu on the right
for example). But maybe I can do that with one column too.

Thanks!!
Nico

 

[Nico Schuyt]

Nico Schuyt wrote in news:[email protected]:

Correct me when I'm wrong.
When using 100% for the height or width it means the maximum height or
width of the browser window that the visitor has set.

I think you're right.

In your case
try to use a height of 253% or try using em for height.

Not practical I'm affraid. Probably the solution offered by Eric Bednarz
(one column) is the easiest approach
Thanks for your help.
Nico

 

[Nico Schuyt]

The general consensus is that this can't be done without resorting to
CSS tables which, of course, don't work on a certain high profile
browser.
There are some suggested workarounds, mainly involving backgrounds,
so it "looks" like the left hand div extends to the bottom of the
content.

Seems to be the best solution so far.

Here is a page where I was experimenting with it. The middle bit is
what you are after. Fiddle around with those commented out borders to
see what is hapenning.
http://users.bigpond.net.au/rf/html/notable.html

Ehhh, what's the intention of the test page? I don't see high columns
anywhere (must be my age :-(

Thanks so far,
Nico

 

[Nico Schuyt]

Nico Schuyt wrote:

The height is the same using Mozilla 1.5

So there is hope I think I'll wait a couple of years till all browsers
have a new version and try again.
Thanks,
Nico

 

[Nico Schuyt]

You looked with IE, in Moz + O it's worse :-(

Give me only the good news
Nico

 

[rf]

Maybe you're right



So, one column instead of two. I must admit I didn't think of that!
In this particular case I thought I needed two columns in order to show the
possibilities of CSS (e.g change the order of the columns: menu on the right
for example). But maybe I can do that with one column too.

Thanks!!
Nico

Did you miss my prior post Nico? The one Eric responde to?

Cheers
Richard.

 

[Nico Schuyt]

Did you miss my prior post Nico? The one Eric responde to?

Of course not My reply was:

The general consensus is that this can't be done without resorting to
CSS tables which, of course, don't work on a certain high profile
browser.
There are some suggested workarounds, mainly involving backgrounds,
so it "looks" like the left hand div extends to the bottom of the
content.

Seems to be the best solution so far.

Here is a page where I was experimenting with it. The middle bit is
what you are after. Fiddle around with those commented out borders to
see what is hapenning.
http://users.bigpond.net.au/rf/html/notable.html

Ehhh, what's the intention of the test page? I don't see high columns
anywhere (must be my age

Thanks so far,
Nico

 

[rf]

Seems to be the best solution so far.


Ehhh, what's the intention of the test page? I don't see high columns
anywhere (must be my age :-(

I'm sorry, the test page is just that, a test page. Here, I have built
another one:
http://users.bigpond.net.au/rf/test/notable1.html

The idea is that you change the width of your canvas. With a wide canvas the
navbar column is longer. With a narrow canvas the content column is longer.
It *looks* like both columns are the same height but, in fact they are not,
as evidenced by
http://users.bigpond.net.au/rf/test/notable1b.html
where large borders have been turned on for the two offending divs.

Of course you have to be using IE out of quirks mode. Mozilla gets it
different/wrong/right/I dunno. IIRC I gave up on this exercise just after I
discovered this and came to the conclusion that until all the browsers
support CSS tables then just do it in an HTML table and be damned to the
purists <g/> who insist that a table can not be used for layout when it is,
in fact, the only viable alternative in this situation.

<aside>
I once tried to repair my car <grin/>. That rubber thing in the front end
suspension was perished. Well I could not get the suspension apart. Spanners
didn't work, my Dad's puller thingo didn't work, a hammer didn't work. Took
the offending car to the Expert Car Repairer. He produced a ten pound
brickies sledgehammer and with one bloody big wack instantly dismantled the
front end. Didn't break anything, just knew where to hit, how hard to hit,
and *which tool to use*
</aside>

Cheers
Richard.

 

[rf]

Of course not My reply was:

S'alright. I should have just waited a minute or so. Everybodys post's are
dribbling in slowly at the moment. Bigswamp has some problems

Cheers
Richard.

 

[Nico Schuyt]

I'm sorry, the test page is just that, a test page. Here, I have
built another one:
http://users.bigpond.net.au/rf/test/notable1.html
Of course you have to be using IE out of quirks mode. Mozilla gets it
different/wrong/right/I dunno. IIRC I gave up on this exercise just
after I discovered this and came to the conclusion that until all the
browsers support CSS tables then just do it in an HTML table and be
damned to the purists <g/> who insist that a table can not be used
for layout when it is, in fact, the only viable alternative in this
situation.

I give up too

<aside>
I once tried to repair my car <grin/>. That rubber thing in the front
end suspension was perished. Well I could not get the suspension
apart. Spanners didn't work, my Dad's puller thingo didn't work, a
hammer didn't work. Took the offending car to the Expert Car
Repairer. He produced a ten pound brickies sledgehammer and with one
bloody big wack instantly dismantled the front end. Didn't break
anything, just knew where to hit, how hard to hit, and *which tool to
use* </aside>

I'm about to use that sledgehammer for my site

Thanks again!
Nico