How do i make a border with css around some elements without specifing an absolute width?

i am new to css and would like to draw a border around this:

<form name="SomeForm" method="post" action="SomeAction">
  <fieldset>
    <legend>Details</legend>
    <div class="menu">
      <p><label for="UserName">Username</label><input name="UserName" id="UserName" type="text" value="#data[1].username#"></p>
      <p><label for="Password">Password</label><input name="Password" id="Password" type="password" value="#data[1].password#"></p>
      <p><label for="FirstName">First name</label><input name="FirstName" id="FirstName" type="text" value="#data[1].firstname#"></p>
      <p><label for="LastName">Last name</label><input name="LastName" id="LastName" type="text" value="#data[1].lastname#"></p>
    </div>
  </fieldset>
</form>

This is my css

fieldset {
  background-color: #e1e1e1;
  border: 1px solid #808080;
}

legend {
  background-color: #e1e1e1;
  border: 1px solid #808080;
  border-left-width; 50%;
  color: #0667ad;
  font-style: italic;
  font-weight: bold;
}

div.menu {
  border: 1px solid #808080;
  padding: 1px;
  width: 271px;
}

p {
  margin: 1px;
}

label {
  border: 1px solid #e1e1e1;
  background-color: #84b0d4;
  color: #ffffff;
  display: block;
  float: left;
  margin-right: 1px;
  padding: 1px;
  text-align: right;
  width: 8em;
}

input {
  background: #ffffff;
  border: 1px solid #e1e1e1;
}

Right now i have defined the div width as 271px. Is there a way to wrap the border around the elements it contains without specifing an absolute width?

From stackoverflow

• div.menu {
    border: 1px solid #808080;
    padding: 1px;
    float: left;
  }
  

  and

  <div class="menu">
    <p><label for="UserName">Username</label><input name="UserName" id="UserName" type="text" value="#data[1].username#"></p>
    <p><label for="Password">Password</label><input name="Password" id="Password" type="password" value="#data[1].password#"></p>
    <p><label for="FirstName">First name</label><input name="FirstName" id="FirstName" type="text" value="#data[1].firstname#"></p>
    <p><label for="LastName">Last name</label><input name="LastName" id="LastName" type="text" value="#data[1].lastname#"></p>
  </div>
  <div style="clear: both;"></div>
  

  mrt181 : float: left is enough. what does the second div do?

  T Pops : this works for me **only** when i take the `float:left` off of `label`.

  David Hedlund : @mrt181: when an element is left-floated, it doesn't occupy any space in its container. therefore, the menu div could break out of your fieldset, pretty much depending on what the rest of the page looks like. i just realized i placed it inside the div in error, though, it should clear it just after it instead. editing...

  Josh Stodola : @David It would be nice if you explained the "clear fix" instead of just dumping a snippet on here.

  Rudism : The clear fix can usually also be avoided by setting overflow: auto on the parent element.

  David Hedlund : @Josh: i agree about that, but at least now it's explained in the comments

• Remove float: left from your labels, add float: left to your div.menu, and remove the width: 271px from your div.menu.

  The reason it breaks now when you remove the width from div.menu is because the labels are floated left and not clearing the input above them.

  Edit: Another option if you want to leave the labels floated left would be to add a clearing rule to the paragraphs within the menu:

  div.menu p { clear: both; }