common cross-browser-compatible base layout required (HTML,CSS)

Question

1.00/5 (1 vote)

See more:

HTML/CSS: I need the following layout, primarily (idea) window-filling, but should work also as content of a resizable div.

fixed height by content
fixed width by content	variable height/width resizable by surrounding container size	fixed width by content
fixed height by content

The scrollbars at the center rectangle shall be "auto" on "overflow".
Everything works fine with "display:table; table-layout:fixed" (in a bit complicated construct, which I found after long research), but it works only in Chrome and Opera. In IE and Firefox the vertical scrollbar appears at the right of the surrounding window/block, not at the center's rectangle. [ !Attention!: The wanted scrollbars in the above (manually wired) view are not visible in Firefox ]
Please have a look at that construct at Fiddle ( https://jsfiddle.net/44ntbusb/ ) and play with the size of the result window in different browsers, watching the scrollbars.
Apparently in IE and FF the center rectangle doesn't shrink below content height.
In fact, such a (logically primitive) base layout would apply to many applications.
I am very frustrated, because I didn't find a precise cross-browser solution until now - I guess, the difficulties arise from the flow-paradigm (versus window-paradigm) of HTML, but the problem SHOULD be solvable anyhow.

Please help. Many thanks in advance...

Posted 12-Jun-15 7:25am

TomErnst

Updated 12-Jun-15 7:39am

v2

Add a Solution

Comments

Richard Deeming 12-Jun-15 13:58pm

If you can drop support for IE10 and earlier, then Flexbox[^] would be the simplest solution.

TomErnst 13-Jun-15 2:41am

Thanks for your invaluable advice, it opened a new dimension for me. But in fact, it doesn't help with my problem: First level of nesting again works fine, but I can't manage to get the y-auto-scrollbar at the INNER div, which seems to be logical BECAUSE of the nesting. The scrollbar appears to the right of the whole first-level column's middle row, not to the second-level row's middle cell.

virusstorm 12-Jun-15 14:50pm

You might be better off at using a framework designed for such things. Have you look at using Bootstrap CSS? It is an open source CSS framework with a lot of cross browser compatibility built into it.

TomErnst 13-Jun-15 2:43am

Sorry, this wasn't my request, because I want to MAKE a somehow similar framework, not to USE one. None of the known frameworks (i.e. Bootstrap CSS) do deliver the wanted matrix-oriented layout model, they all base on a non-recursive flow paradigm.

TomErnst 13-Jun-15 3:52am

Appendix to explain my goals:
I am searching for a HTML/CSS-equivalent to partial zooming (not the scaling-type, but the advancing into windows/tunnels in a fractal way) to establish an object-oriented collection (tree-paths) of target-view-windows.
Trying to visualize it in z-direction (x-direction dropped):


    |...
   W|T
    |...     |...
   W|--------|T
    |...     |...

where every W means a div (rect window) in the browser and every T means a target in the object tree.
Think of it (in x/y-direction) as a diagram with embedded, recursively openable diagram-elements (diagrams in turn), where the particular path-contexts (tree-levels) to the particular target (including the frames of every level) may not be hidden, but have to be minimized.
The process will be: choose a root-path, unfold the content while expanding the outer frame (as long as there is enough space left in the browser window, no scroll is necessary). Do it recursively.
Of course this is matrix-oriented by paradigm, not flow-oriented.
Effectively that seems to force size computation from inside to outside with size restrictions and possible manual resizing at every level.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)