Dynamic box size...

[stmasi]

Using CSS to create what looks like tables on page.

----------------------
| contentcontentcont | Section A
| contentcontentcont |
----------------------
| contentcontentcont | Section B
----------------------
| contentcontentcont | Section C
| contentcontentcont |
| contentcontentcont |
| contentcontentcont |
| contentcontentcont |
----------------------
| contentcontentcont | Section D
----------------------

Sections A, B, and D are set sizes and I'd like to set Section C to occupy 100% of whatever height remains on the page.

How in cyberspace do I accomplish this?

Thanx.

[Nevermore]

Assuming that D is right at the bottom of the page and A and B right at the top, you can put them all in a div and set position to relative and height:100%.

[stmasi]

Well, how can I do this if I need the boxes to be the following sizes:

Box A: 600w x 100h
Box B: 600w x 20h
Box C: 600w x 100% of remaining height of page
Box D: 600w x 20h

Thanx.

[Nevermore]

This should do the trick:

<div style="height:100%;">
<div style="height:100px; width:600px; position:relative;"></div>
<div style="height:20px; width:600px; position:relative;"></div>
<div style="height:100%; width:600px; position:relative;"></div>
<div style="height:20px; width:600px; position:relative;"></div>
</div>

[stmasi]

Can you look at this and tell me what I'm doing wrong?

home.bendcable.com/theallensplace

I don't understand why the third (bdy) box isn't filling the remainder of the available page. Is it because I'm choosing to use a style sheet instead of inline styles?

Thanx again.

[Nevermore]

Try it with the code I gave you plus some borders - it's strange, it seems to work for me on my computer but not online. Perhaps it needs some content in the frame.

[stmasi]

Nope.

If I make a page with only your code, I'm left with the three static boxes being created at their appropriate sizes, but the one dynamic box is being created at 100% of the entire screen instead of 100% of what's left over after figuring the other three boxes.

Any other ideas? I'm at a loss. It seems as though it should be such a simple task and I'm getting a migraine over this thing.

Thanx.

[Nevermore]

The only other thing I can think of would be just putting the content designed for the 3rd box in the main div - the one that surrounds the others - and aligning the bottom div to the bottom of the screen. That should work.

[stmasi]

I hope you'll forgive the new guy, but how would I go about doing that?

:D

Thanx yet again!!!

[khaki]

I'm sorry that this isn't a solution....
it's more of an observation....

this is the 2nd thread which you created to try to use CSS to duplicate what you are able to create using tables.

and so far the solutions offered (in both threads) do not work.
I don't say that to be rude to those who have offered you help...
the point is that it is SO hard to do... that there are few (if any?) who know how to do it.
(it's certainly not untuitive by any means)

and yet....
the use of tables for layout is ridiculed without mercy in this forum.

personally I do not use tables for layout.
but I also do not use CSS for fluid pages that require HEIGHT settings.
(WIDTH seems to be okay though).

hopefully Charles or Vladdy (or someone who knows how to do this) will see this thread and offer a solution.
because so far.... it appears that CSS is unable to replicate the layout requirments that a table can provide.
(but I desperately want to see how it is done)

paying close attention...
;) k

[Nevermore]

<div style="height:100%; width:600px;">
<div style="height:100px; width:600px; position:relative;"></div>
<div style="height:20px; width:600px; position:relative;"></div>
<--Content designed for 3rd div goes here--!>
<div style="height:20px; width:600px; position:relative; bottom:0px;"></div>
</div>

[Nevermore]

Ooops... this works, that one doesn't!

<div style="height:100%; width:600px; position:relative;">
<div style="height:100px; width:600px; position:relative;"></div>
<div style="height:20px; width:600px; position:relative;"></div>
Content
<div style="height:20px; width:600px; position:absolute; bottom:0px; left:0px;"></div>
</div>

[Nevermore]

Khaki;

I think its working, although it will be nice when the new CSS standard introduces better 'table-like' height controls.

[stmasi]

Okay. Last question for me in this thread and then I'll abandon this design...

Is there any way to use a formula in a width or height setting in styles?

Example:

#theTop {
background-color: #ffffff;
border-style: none;
color: #000000;
font-family: arial, helvetica, sans-serif, verdana;
font-size: 8px;
font-style: normal;
height: [(window.availHeight-150)*100%];
margin: 0px;
position: relative;
text-align: center;
width: 700;
}

Thanx to all who have contributed...I've learned a lot.

[Nevermore]

Not without using JavaScript. What's the problem? Didn't that work? It works for me...

[khaki]

YES!!! :)

it's working for me!
great job cijori :) !!!

i'm sooooooo sorry :( if i made it seem like you weren't one of the people who could figure this out.

my intention was to point-out that it is not an easy and intuitive solution (even the noodleincident guy doesn't tackle it)

i'm saving your code as a template for fluid HEIGHT layout.
THANK YOU CIJORI :) !!!

very gratefull....
;) k

(oh.... and can you show how to use javascript to set the attribute values in <style>?)

[stmasi]

No...didn't work.

How would I do that in javascript?

Thanx.

[stmasi]

Actually, I should rephrase my response.

Yes...it worked...

But...

On this page, the content of the big div will be changing dynamically. Won't I lose the other three divs if I do that?

Thanx.

[Nevermore]

I would just use something like

function changesize() {
document.getElementById('bigdiv').style.height=//Insert height equations here
}

and then call that onload.

Although you could use document.write to write in the result of the equation as the page loads up, but that couldn't be linked to a mouseover or anything.

[nkaisare]

Khaki, tell me a non-javascript method to do that (making table stretch 100% of the screen height - crossbrowser).

<div height="100%"> need not work. This is because 100% has to be with respect to something:
1. Viewport (ie. screen)
2. <html></html> (ie page contents).

Cijori's method is correct, but may not work in all browsers (works in IE and Moz, I think).

Some time back, I had linked to Peter-Paul Koch's method for getting 100% height. I am currently not on my computer... so don't have my bookmarks. You can browse thru some recent threads to get that link.

[khaki]

Khaki, tell me a non-javascript method to do that (making table stretch 100% of the screen height - crossbrowser). huh :confused:
i don't get it. what :confused:

and just so you know...
this topic has now moved over to the javascript forum (and it still isn't exactly working).

here's the link to that thread:

http://forums.webdeveloper.com/showthread.php?s=&threadid=10249

but seriously...
are you asking me something :confused: ...
or are you busting my chops :confused: ...
i don't get it :confused:

:confused: k

[nkaisare]

Originally posted by khaki
but seriously...
are you asking me something :confused: ...
or are you busting my chops :confused: ...
i don't get it :confused:
I was replying to your statement:
and yet....
the use of tables for layout is ridiculed without mercy in this forum.

it appears that CSS is unable to replicate the layout requirments that a table can provide.
--------------------
this topic has now moved over to the javascript forum
Thx... I didn't see the javascript forum.
--------------------
OK, here is the PPK link to 100% height
http://www.xs4all.nl/~ppk/css2tests/index.html?100percheight.html

NOTE: This is a very bad way. But the requirement IS bad. If you want your stuff to display only 100% - no more no less, this is a css way. I wont use it... but still, here it is!!

<div id="height100pct" style="margin-top: 100px; margin-bottom: 40px">
</div>
<div style="width: 600px; height: 100px; position: absolute; top: 0; left: 0"></div>
<div style="width: 600px; height: 20px; position: absolute; bottom: 0; left: 0"></div>
<div style="width: 600px; height: 20px; position: absolute; bottom: 20px; left: 0"></div>

Again, this is a BAD method. It should work in most browsers except Safari/Mac.

[nkaisare]

Stmasi,
Give me your tables solution. May be we can figure out CSS solution from that. As I said, my obsession for CSS is driven more by ego than accessibility requirements :)

I think my previous method may work. because the <div id="height100pct"> will be 100% height... with 100px and 40px margins for the div at top and the two at bottom. Since these three divs are absolutely positioned, they are out of the document flow.

[khaki]

so Niket....
i checked that link...

my eyes practically popped out of my head when I read this
(in regard to CSS and the HEIGHT attribute):

"I still think that it is far too restrictive and it's caused
by bad thinking on the part of the standard makers and
the browser vendors. Counter-intuitive and unnecessary
rules like this one make our beautiful CSS too hard to work with."

and that's from a CSS guru
(so what hope is there for the rest of us :eek: lol )

well anyway...
that's all I was saying.

;) k

[nkaisare]

I mentioned in my other thread Peter-Paul's comments regarding some of the standards. Standards are made by people, experts - yes, but still people. And there are bound to be "errors" or counter-intuitive interpretations. Adherence to standards is recommended not because they are sanctimonious, but because they are supposed to (which may be different from the reality :() work now on all platforms, and have the best chance of working in the future.

I am not sure if this rule is counter-intuitive. Same thing with box model (W3 vs IE5). A lot of people think the W3 way is counter-intuitive... equal number of people think that it is in fact intuitive. Whatever the case may be, this is what we have now... and this is what we have to work with. Personally, I will NOT use the 100% hieght hack. In design, there is nothing like "the right way"... its all subjective.