Home/ Questions/Q 178533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T14:14:52+00:00

I have an HTML editor widget that I want to appear within an absolutely

  • 0

I have an HTML editor widget that I want to appear within an absolutely positioned, fixed-size DIV. However, I don’t know the absolute size of the DIV beforehand, and it may change, like if the user resizes the window.

The editor, naturally, has controls and an editable area. Each has their own DIV. I want the controls to take up as much space as they need to, and the editable area to fill the rest of the space.

If I use tables, this is extremely easy to achieve. I just turn off borders and padding and margins, and throw each DIV into a cell in its own row, and maybe fiddle with max-height on the controls DIV. This is what it looks like:

Base table http://img407.imageshack.us/img407/8435/table1.png

Same table with window resized another way http://img264.imageshack.us/img264/6438/table2p.png

Notice the editable section taking up as much space as possible without causing scrollbars to appear.

I’ve monkeyed with various CSS examples and nothing seems to work without having some JavaScript run on resize to make the editable DIV be the height of the parent minus the height of the controls.

Of course, I can make the parent DIV have display:table and the child DIVs wrapped in display:table-row DIVs and themselves have display:table-cell, but…well…in that case it’s exactly the same as using TABLE, TR, and TD, but ten times more ugly for the sake of CSS purity. (Why bother?)

So, without directly using display:table & friends, nor TABLE/TR/TD, nor JavaScript, is there a pure CSS way of doing this? In other words, is there a pure CSS way of saying, DIV1, take up as little vertical space as possible, and DIV2, take up the remaining vertical space within the parent element?

If there isn’t, I’m quite ready to stop subscribing to the ‘pure CSS’ mentality. It’s caused me enough grief with very little developer or end-user benefit.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. You only have so many options. If you want table-like behavior without using a table then use display:table and give yourself the option of changing your mind later. That way, while uglier in the markup (subjective), makes more sense to me: you’ll end up with a few more elements, but you won’t be locked in to a specific layout.

    If you don’t care about the markup then pull the trigger and use a table. This will be easier in the short-term.

    My question: If you don’t want to use JavaScript, how will you be implementing your editor controls?

    • 0