How do I fit a fieldset to the size of its content with CSS?

Question

I have a fieldset with some contents, and the contents are moved relative to their original position. See this jsFiddle.

I was pleased when I got on Stack Overflow and searched for my problem: I thought this question was the answer. However, that question only deals with width (to shrink the width of the fieldset to the size of the contents, change the display to inline, or something similar).

How do I shrink the fieldset to the size of the contents? Namely, I want the height of the fieldset to shrink when the contents of the fieldset are moved up.

I don't see anything being moved in that fiddle. How are these elements moved? — James Montagne, Oct 13 '11 at 19:18
If i'm understanding you correctly, you problem is that the relatively positioned element still occupies the original position even though it is not there anymore? I'm not sure you can do anything about that aside from positioning things absolutely with a set height or something along those lines. — James Montagne, Oct 13 '11 at 19:23

z00l · Answer 1 · 2011-10-13T19:38:30.073

Maybe you could add display:inline-block; to the fieldset's css, f.ex. in you example:

fieldset{
    border: solid 2px blue;
    display:inline-block;  
}

Does this achieve what you mean? Older browser should stick to display:inline; though.

Edit: ok, with the new fiddle I see what you want to achieve. I guess you have to use javascript to adjust the height in this case - if it is suitable for you.

Here's an example:

window.addEvent('domready', function() {
    $('myfieldset').setStyle('height', $('myfieldset').getStyle('height').toInt() - 20);
});

Just add id="myfieldset" to your fieldset to make it work in your example.

Link to this solution: http://jsfiddle.net/rMrLe/

After the fieldset for behaving normally use '
'. – Malus Jan Aug 07 '16 at 01:42 — Malus Jan, Aug 07 '16 at 01:42

score 2 · Answer 2 · answered Oct 13 '11 at 19:15

2

You can make it an inline-block: http://jsfiddle.net/XDMfN/49/

Or inline (for IE): http://jsfiddle.net/XDMfN/50/

answered Oct 13 '11 at 19:15

Blender

289,723
53
439
496

1

Not possible. The `position: relative` property makes the element render normally, then just shifts it around. – Blender Oct 13 '11 at 19:20
Ah, I see. Change your answer to be your comment so I can accept? – Joseph Hansen Oct 13 '11 at 19:21

score 0 · Accepted Answer · answered Oct 13 '11 at 19:37

This isn't possible because position: relative makes the element render normally, then shift, so the fieldset "thinks" the element is in its normal-rendered state.

The only real option to fix this dynamically is to use Javascript, as seen in this jsFiddle which uses jQuery to change the height css property.

How do I fit a fieldset to the size of its content with CSS?

3 Answers3