0

I am using the <fieldset> tags for a website I am making to display information because the fieldset box makes separating the information more appealing.

The only issue is that the fieldset box spreads the width of the browser page and has lots of empty white space. Is there an attribute or way to make it so that it isn't as long across the screen?

j08691
  • 204,283
  • 31
  • 260
  • 272
Kaitlyn Wheeler
  • 3
  • 3
  • Should you using a fieldset if it is only to make the page more appealing? - see the answer with 5 upvotes: https://stackoverflow.com/questions/9812898/is-it-wrong-to-use-the-fieldset-tag-without-form-tag – Pete Oct 11 '19 at 13:38
  • Make that six upvotes. I would tend to agree with @Pete - while it may be technically "valid" HTML, it is certainly not _semantic_ markup if it is simply being used for styling purposes. The same effect can be achieved with a more appropriate container/containers and CSS. – Alexander Nied Oct 11 '19 at 13:53

1 Answers1

1

All block-level elements with unspecified size will take the full available width.

If you add some css to the fieldset to set it to display as an inline block, it will not go full width. You can also set a width there is you wanted.

fieldset{
  display: inline-block;
}

or

fieldset{
  width: 50%
}

The only issue you might have here is that the fieldset might not flow properly because it'll be inline. You could also set a width on the fieldset using CSS or wrap the fieldset in a div and set the DIVs width to whatever width you need.

Here's a codepen with examples of each: https://codepen.io/jamiecalder/pen/dyyYLVp

FZs
  • 16,581
  • 13
  • 41
  • 50
Jamie Calder
  • 931
  • 7
  • 12