"autostretching" divs

[ItsMeOnly]

IN http://rambo.id.uw.edu.pl/viewer.html I attempted to create "tableless" dwesign, and while it looks seemingly OK, it required some very fuzzy logic and obscure math to get that right: particularily "window border" and "scrolled window" divs have ugly hardcoded dimensions.

My question is: does anyone know or has heard of "snapping" divs to other elements' "containers" so their sizes are calculated by browser (they simply gonna stretch from A to B, even if position of B can be changed- yes, I want to implement "window resizing"), and are not needed to be hardcoded.

[Twey]

You mean height: 100%; width: 100%; ? I don't quite grasp what you mean by:

"snapping" divs to other elements' "containers"

[ItsMeOnly]

Well, in X/Motif terminology it would be something like this:
XmCreateWidget("appWindow", someWidgetClass,
"viewerAera",
XmNbottomAttachment, "statusBar",
XmNtopAttachment, "toolBar", ...);
...more or less,

There are no "attachments" in CSS (unfortunately), there's only positioning and dimensions, so I'm hoping somebody came with some workaround...

my point is, that div ("viewerAera") with height 100% inside another div ("appWindow") surrounded by top and bottom divs (the mentioned statusBar and toolBar id's), was going mad and rendered either thru the bottom "statusBar" div or on right side of it. I tried relative positioning, but then it went even worse because floating images in divs would simply overlap across the "bars".

[Twey]

Aha, I see.

What you want to do, I think, is to put all three elements -- toolbar, window and status bar -- into one element and set their widths to 100%, then stretch the outer container.

[ItsMeOnly]

not just that, the statusBar and toolBar should remain fixed in, in order, top and bottom of "appWindow" div, while "viewerArea" is meant to stretch "snapping" to them, when "appWindow" changes size.

[Twey]

For that, you just need to give them fixed percentage heights.

[ItsMeOnly]

... yeah, and that's the problem that raises obvious question: since IE doesn't support table, table-row, table-cell display properties (and it looks like IE7 still won't) I can't exactly use them, thus images and text inserted into divs, that need to be small in percentage, will overflow the box- theoretically I can use <br style="clear: both" />, but it's gonna create nocicable "gap" at the bottom of divs. I know, because tried...

Well, seems that the only solution is either not to care about 62% of viewers with IE :-p, or still having table-based layout

[Twey]

If the divs are set to margin:0; padding:0; display:block; and overflow:hidden; that shouldn't be a problem.

[ItsMeOnly]

http://rambo.id.uw.edu.pl/test.html
A test behaviour page demonstrating what happens and what I want to avoid

[jscheuer1]

If everything is contained inside, say - a division with dynamic dimensions expressed in pixel units, you can use css style to set the contained elements:

float:left;

and their height and width to whatever percentage of the container that you wish them to occupy. Then they will stack from left to right across the container as long as their widths do not add up to more than 100% (or perhaps a little less). The one tricky part is that although IE will generally work OK with just that, all other browsers require you to have an empty division at the bottom of the container with its style set to:

clear:left;

Otherwise, you will have unfilled elements not extending for the height of the container.

If you want some/one of the content elements to wrap to the next line, either give them clear:left; style or make sure that the preceding row of elements adds up to 100% width.