Q:

using jquery show/hide doesn't keep css in div

I have a div that creates a border with css and what I want to do is show a form when a user clicks the button.
HTML form:
<div class="dropshadow-add">
    <h3>Add</h3>
        <button class="addwebcam">Add</button>
        <button class="addaxiscam">Add Another</button>

    <div id="cameraformwebcam" title="Add a webcam">
    <form id='AddCameraFormWebcam' name='' method='post' action=''>
        <label for="CameraName">Camera name:&nbsp;</label>
        <input id="CameraName" name="camera_name" size="24" maxlength="36" value="Enter label for camera" />
        <label for='CameraQuality'>Camera quality:&nbsp;</label>
        <select id='CameraQuality' name='camera_quality'>
            <option value='HIGH' selected='selected'>High</option>
            <option value='MEDIUM'>Medium</option>
            <option value='MOBILE'>Mobile</option>
        </select>
...
        <button type='submit' class='submit_camera' name='addcamera' value='Add'>Add</button>
        <button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
    </form>
    </div>
<div id="cameraformaxis" title="Add an Axis camera">
    <form id='AddCameraFormAxis' name='' method='post' action=''>
        <label for="CameraName">Camera name:&nbsp;</label>
        <input id="CameraName" name="camera_name" size="24" maxlength="36" value="Enter label for camera" />
        <label for='CameraQuality'>Camera quality:&nbsp;</label>
        <select id='CameraQuality' name='camera_quality'>
            <option value='HIGH' selected='selected'>High</option>
            <option value='MEDIUM'>Medium</option>
            <option value='MOBILE'>Mobile</option>
        </select>
...
        <button type='submit' class='submit_camera' name='addcamera' value='Add'>Add</button>
        <button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
    </form>
    </div>
    </div>

jQuery code to show/hide the form on click:
jQuery('#cameraformwebcam').hide();
jQuery('#cameraformaxis').hide();

jQuery('.addwebcam').click(function(e) {
    jQuery('#cameraformwebcam').show();
    jQuery('#cameraformaxis').hide();
});

jQuery('.addaxiscam').click(function(e) {
    jQuery('#cameraformaxis').show();
    jQuery('#cameraformwebcam').hide();
});

Finally, my problem is the CSS code:
#AddCameraFormWebcam label,#AddCameraFormAxis label,
#AddCameraFormWebcam input,#AddCameraFormAxis input,
#AddCameraFormWebcam select,#AddCameraFormAxis select,
#AddCameraFormWebcam textarea,#AddCameraFormAxis textarea{
  display: block;
  float: left;
  width: 200px;
  margin-bottom: 1em;
  margin-top: 0.5em;
}
#AddCameraFormWebcam select,#AddCameraFormAxis select{
  width: 100px;
}
#AddCameraFormWebcam label,#AddCameraFormAxis label {
  clear: both;
  color: black;
  width: 120px;
  padding-right: 8px;
  text-align: left;
  white-space: nowrap;
}
#AddCameraFormWebcam label.error,#AddCameraFormAxis label.error {
  float: none;
  color: red;
}
#AddCameraFormWebcam button[type="button"],#AddCameraFormAxis button[type="button"]{
  float: right;
  width: 100px;
  margin-left: 10px;
  margin-top: 5px;
}
#AddCameraFormWebcam button[type="submit"],#AddCameraFormAxis button[type="submit"] {
  float: right;
  width: 100px;
  margin-top: 5px;
}
#AddCameraFormWebcam button[name="cancel_changes"],#AddCameraFormAxis button[name="cancel_changes"] {
  clear: both;
}
#AddCameraFormWebcam button[name="camera_status"] + label,#AddCameraFormAxis button[name="camera_status"] + label {
  clear: none;
}

.dropshadow-add {
 -moz-border-radius: 5px;
 border-radius: 5px;
 -moz-box-shadow: 5px 5px 5px #ccc;
 -webkit-box-shadow: 5px 5px 5px #ccc;
 box-shadow: 5px 5px 5px #ccc;
 width:    400px;
 padding:15px 15px 15px 15px;
 margin-bottom:15px;
 margin-left:15px;
 margin-right:15px;
 background-color:#ffffff;
 border: 1px solid #CCCCCC;
 padding: 1px 15px 15px 15px;
}

See this fiddle to play around. 
Click a button and you will see that form goes outside the div. How can I keep it in the div? If I change the buttons and the labels to float: inherit it does work but then the formatting is messed up. I want to put the form in the div and the buttons should be on the right (add button, then cancel button next to each other). Thanks in advance.

A:

Replace your CSS with this
#AddCameraFormWebcam label,#AddCameraFormAxis label, 
#AddCameraFormWebcam input,#AddCameraFormAxis input, 
#AddCameraFormWebcam select,#AddCameraFormAxis select, 
#AddCameraFormWebcam textarea,#AddCameraFormAxis textarea{
    display: block;
    width: 200px;
    margin-bottom: 1em;
    margin-top: 0.5em;
}
#AddCameraFormWebcam select,#AddCameraFormAxis select{
    width: 100px;
}
#AddCameraFormWebcam label,#AddCameraFormAxis label {
    clear: both;
    color: black;
    width: 120px;
    padding-right: 8px;
    text-align: left;
    white-space: nowrap;
}
#AddCameraFormWebcam label.error,#AddCameraFormAxis label.error {
    float: none;
    color: red;
}
#AddCameraFormWebcam button[type="button"],#AddCameraFormAxis button[type="button"]{
    width: 100px;
    margin-left: 10px;
    margin-top: 5px;
}
#AddCameraFormWebcam button[type="submit"],#AddCameraFormAxis button[type="submit"] {
    float: right;
    width: 100px;
    margin-top: 5px;
}
#AddCameraFormWebcam button[name="cancel_changes"],#AddCameraFormAxis button[name="cancel_changes"] {
    clear: both;
}
#AddCameraFormWebcam button[name="camera_status"] + label,#AddCameraFormAxis button[name="camera_status"] + label {
    clear: none;
}

.dropshadow-add {
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
  width:    400px;
  padding:15px 15px 15px 15px; 
  margin-bottom:15px;
  margin-left:15px;
  margin-right:15px;
  background-color:#ffffff;
  border: 1px solid #CCCCCC;
  padding: 1px 15px 15px 15px;
}​

Fiddle: http://jsfiddle.net/K6FwH/2/
1.
#AddCameraFormWebcam label,#AddCameraFormAxis label,
#AddCameraFormWebcam input,#AddCameraFormAxis input,
#AddCameraFormWebcam select,#AddCameraFormAxis select,
#AddCameraFormWebcam textarea,#AddCameraFormAxis textarea{
  display: block;
  float: left;
  width: 200px;
  margin-bottom: 1em;
  margin-top: 0.5em;
}

Remove float: left;
2.
#AddCameraFormWebcam button[type="button"],#AddCameraFormAxis button[type="button"]{
  float: right;
  width: 100px;
  margin-left: 10px;
  margin-top: 5px;
}

Remove float: right; and margin-left: 10px;
Fiddle: http://jsfiddle.net/K6FwH/2/
If you want to keep the buttons right aligned
Fiddle: http://jsfiddle.net/enve/K6FwH/3/

