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

[agoxAtola]

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:\[code\]<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="http://stackoverflow.com/questions/13810109/Enter label for camera" /> <label for='CameraQuality'>Camera quality:&nbsp;</label> <select id='CameraQuality' name='camera_quality'> <option value='http://stackoverflow.com/questions/13810109/HIGH' selected='selected'>High</option> <option value='http://stackoverflow.com/questions/13810109/MEDIUM'>Medium</option> <option value='http://stackoverflow.com/questions/13810109/MOBILE'>Mobile</option> </select>... <button type='submit' class='submit_camera' name='addcamera' value='http://stackoverflow.com/questions/13810109/Add'>Add</button> <button type='button' class='cancel_changes' name='cancel_changes' value='http://stackoverflow.com/questions/13810109/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="http://stackoverflow.com/questions/13810109/Enter label for camera" /> <label for='CameraQuality'>Camera quality:&nbsp;</label> <select id='CameraQuality' name='camera_quality'> <option value='http://stackoverflow.com/questions/13810109/HIGH' selected='selected'>High</option> <option value='http://stackoverflow.com/questions/13810109/MEDIUM'>Medium</option> <option value='http://stackoverflow.com/questions/13810109/MOBILE'>Mobile</option> </select>... <button type='submit' class='submit_camera' name='addcamera' value='http://stackoverflow.com/questions/13810109/Add'>Add</button> <button type='button' class='cancel_changes' name='cancel_changes' value='http://stackoverflow.com/questions/13810109/Cancel'>Cancel</button> </form> </div> </div>\[/code\]jQuery code to show/hide the form on click:\[code\]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();});\[/code\]Finally, my problem is the CSS code:\[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;}\[/code\]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 \[code\]float: inherit\[/code\] 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.