Question

I am new to CSS and would like to draw a border around this:

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

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

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

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