Re: Filling remainder of height

On Nov 7, 5:01 am, Neredbojias <neredboj...@xxxxxxxxx> wrote:
On 06 Nov 2009, Jason Carlton <jwcarl...@xxxxxxxxx> wrote:

The solution, of course, is to do it right, and in order to do that,
you will have to learn *how* to do it right.

Of course.... which is what I'm asking. Maybe I worded the thread
incorrectly?

Actually, you "worded the thread" just fine if you mean the subject of
your original post.  It's the rest of the text that is dubious.

'I have an element that has height="100%".'...

What element?  Body, div, form...?  Anyway, eventually you reply to
someone and voila! - it's a table!  Pragmatically, it's *all* tables -
a nested-table layout.  And that, my friend, is what is wrong.

Using tables for layout, while frowned upon by some, isn't
uncategorically an error, but it should be in a fairly simple context
and there are usually better ways to do it, anyway.  OTOH, using
*nested* tables for layout wherein the rendered height of any or all is
critical to the layout itself is an absolute blunder, and we haven't
even gotten into doctypes yet!

Yes, I know, it used to work fine...  Unfortunately, though, in order
for it to work fine today, you will have to dump the tables and
redesign the page using standardized markup and styles more germane to
the third millenium.

I'm not trying to insult you here but I *am* trying to convince you
that the solution to the problem, the only real solution, is to bring
your page up to date and up to snuff with current methods.  Anything
less will simply not function as desired for the bulk of Internet users
regardless of whether the bulk of yours use old browsers or not.

--
Neredbojiashttp://www.neredbojias.org/http://www.neredbojias.net/

That doesn't really make sense to me. I don't know of any styling that
can be added to a DIV tag that can't be added to a table, so it
doesn't seem logical to just drop the tables and make older browsers
inoperable, if it's not necessary.

But for the sake of discussion, let's just assume that this is the
code that I'm using:

<body style="height: 100%">

<div style="width: 100%; height: 100%; padding: 10px; border: 1px
solid #000000">
<span style="width: 33%; height: 100%; padding: 5px; border: 1px
solid #000000">Test</span>

<span id="MIDDLE" style="width: 33%; height: 100%; padding: 5px;
border: 1px solid #000000">
<div style="border: 1px solid #000000">Test</div>
<div style="border: 1px solid #000000">Test</div>
<div id="HERE" style="border: 1px solid #000000">Test</div>
</span>

<span style="width: 33%; padding: 5px; height: 100%; border: 1px
solid #000000">Test</span>
</div>


In the 2nd SPAN (id="MIDDLE"), how would I let the first two DIV
elements determine their height based on the content, and then have
the third DIV element (id="HERE") to fill up the remaining height?
.

Quantcast