Fieldset, Widths & Percentages

In this example below you will see how to do a Fieldset, Widths & Percentages with some HTML / CSS and Javascript

Anyone got a clue why fieldset expands beyond it's width setting when it's child does?

This awesome code was written by varystrategic, you can see more from this user in the personal repository.
You can find the original code on
Copyright varystrategic ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Fieldset, Widths & Percentages</title>
  <script src="" type="text/javascript"></script>

    <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">



  <span>Maecenas sed diam eget risus varius blandit sit amet non magna.</span>

  <span>Maecenas sed diam eget risus varius blandit sit amet non magna.</sapn>
  <script src=''></script>




/*Downloaded from */
div {
  width: 20%;
fieldset span,
div span {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: #f00;