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

Question

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?

Answer 1

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>

Answer 2

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; }