12

Here's a fiddle.

I need to make the <fieldset> the width of its contents, rather than its parent. Is there a good way to do this?

Stefan Kendall
  • 66,414
  • 68
  • 253
  • 406
  • possible duplicate of [Is there any way to have a fieldset width only be as wide as the controls in them?](http://stackoverflow.com/questions/2302495/is-there-any-way-to-have-a-fieldset-width-only-be-as-wide-as-the-controls-in-the) – Peter O. Nov 18 '12 at 20:44

3 Answers3

23

Add display:inline to the fieldset http://jsfiddle.net/XDMfN/92/

Smegger
  • 1,008
  • 1
  • 6
  • 15
  • That link doesn't demonstrate display:inline, as you are using the same link as meder above. +1 However, using display:inline did work for me, and I prefer that over using floats. – AaronLS Apr 02 '12 at 23:55
  • Good point, I've updated the link to show how to add display:inline, thanks. – Smegger Apr 03 '12 at 13:14
5

You want a shrinkwrap?

JSFiddle

HTML

<div>
   <form>
      <fieldset>
         <legend>Hey</legend>
         <table>
            <thead><tr><td>H1</td><td>H2</td></tr></thead>
            <tbody><tr><td>A1</td><td>B2</td></tr>
               <tr><td>A2</td><td>B9</td></tr></tbody>
         </table>
      </fieldset>
   </form>
</div>

CSS

fieldset{
   border: solid 2px blue;  
   float:left;
}
table{
   border: solid 2px red;   
}
div{
   width: 80%;   
   overflow:hidden;
   border: solid 2px purple;
   padding: 1em;
}

Output

HTML Output

Community
  • 1
  • 1
meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
5

Add this to your CSS

fieldset 
{
     display: inline;
}
Daniel L. VanDenBosch
  • 2,350
  • 4
  • 35
  • 60
Evan Davis
  • 35,493
  • 6
  • 50
  • 57