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?

Thumbnail
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 Codepen.io
Copyright varystrategic ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Fieldset, Widths & Percentages</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

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

  
</head>

<body>

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

<div>
  <span>Maecenas sed diam eget risus varius blandit sit amet non magna.</sapn>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/varystrategic/fieldset-widths-andamp-percentages-mIyzp */
fieldset,
div {
  width: 20%;
}
fieldset span,
div span {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: #f00;
}

Comments