is there anyway to have a fieldset width only be as wide as the controls in them

Question

it seems that fieldset defaults to 100% width of its container. Is there anyway that you can have the field set just be as big as the widest control inside the fieldset ?

Answer 1

You can always use CSS to constrain the width of the fieldset, which would also constrain the controls inside.

I find that I often have to constrain the width of select controls, or else really long option text will make it totally unmanageable.

Answer 2

Use display: inline-block, though you need to wrap it inside a DIV to keep it from actually displaying inline. Tested in Safari.

<style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
</style>
<div>
  <fieldset class="fieldset-auto-width">
      <legend>Blah</legend>
      ...
  </fieldset>
</div>

Answer 3

You could float it, then it will only be as wide as its contents, but you'll have to make sure you clear those floats.

Answer 4

fieldset {display:inline} or fieldset {display:inline-block}

If you want to separate two fieldsets vertically, use a single <br/> between them. This is semantically correct and no harder than it has to be.