Removing space taken up by padding and margin

nK0de · September 23, 2012

I have a simple webpage which initially looks like this.

When clicked upon a link, a small form appears to the right. And the label which reads Record Added moves to the middle of the page!

How can I stop this from happening? I want that label to stay fixed where it is from the start.

This is the HTML code of the page

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
</head>
<body id="body_services">

<div id="tasks">
<ul>
   	<li><a id="add" href="#">Add a new taxi service</a></li>
       <li><a id="update" href="#">Update a taxi service</a></li>
       <li><a id="delete" href="#">Delete a taxi service</a></li>
       <li><a id="view" href="#">View taxi services</a></li>
   </ul>
</div>

<div id="addForm">
   <form id="frmAddService" name="Add">
   <table width="300" border="0">
     <tr>
       <td><label for="sid">Service ID</label></td>
       <td><input type="text" name="sid" readonly="readonly" value="<?php echo $new_sid; ?>" style="text-align: right" /></td>
     </tr>
     <tr>
       <td><label for="name">Name</label></td>
       <td><input type="text" name="name" /></td>
     </tr>
     <tr>
       <td><label for="cost">Cost</label></td>
       <td><input type="text" name="cost" /></td>
     </tr>
     <tr>
       <td><label for="active">Active</label></td>
       <td><input type="checkbox" name="active" /></td>
     </tr>
     <tr>
       <td></td>
       <td><input type="reset" value="Cancel" /> <input type="submit" value="Save" name="save" /></td>
     </tr>
   </table>
   </form>
</div>

<div id="msg">Record added</div>

<div id="updateForm">
   <form id="cmbServiceIDs" name="sids">
   <table width="400" border="0">
     <tr>
       <td><label for="serviceId">Select the Service Name</label></td>
       <td><?php echo $dropdown; ?></td>
       <td><input id="load" type="submit" value="Load" name="btnload" /></td>
     </tr>
   </table>
   </form>

   <form id="frmUpdateService" name="Update" action="" method="post">
   <table width="300" border="0">
     <tr>
       <td><label for="sid">Service ID</label></td>
       <td><input id="sid" type="text" name="sid" value="" style="text-align:right" /></td>
     </tr>
     <tr>
       <td><label for="name">Name</label></td>
       <td><input id="name" type="text" name="name" value="" style="text-align:right" /></td>
     </tr>
     <tr>
       <td><label for="cost">Cost</label></td>
       <td><input id="cost" type="text" name="cost" value="" style="text-align:right" /></td>
     </tr>
     <tr>
       <td><label for="active">Active</label></td>
       <td><input id="active" type="checkbox" name="active" value="" /></td>
     </tr>
     <tr>
       <td></td>
       <td><input type="reset" value="Cancel" /> <input type="submit" value="Update" name="update" /></td>
     </tr>
   </table>
   </form>
</div>

</body>
</html>

And I have one more question. Please take a look at these screenshots.

I use CSS margin to position the elements on the page. But as you can see, it takes up unnecessary space (orange colored areas). How can I remove them?

This is the CSS code.

* { margin:0; padding:0; }

#msg { float:right; padding-right:250px; padding-top:300px; font-size:15px; font-weight:bold; color:#C00; }

#tasks { float:left; margin-left:150px; margin-top:150px; }

#addForm { float:right; margin-right:200px; margin-top:150px; }

#updateForm { float:right; margin-top:120px; }

#cmbServiceIDs { padding-bottom:20px; }

Thank you

Wickham · September 23, 2012

What happens if you add clear; both; to #msg (and possibly to #updateForm as well)?

#msg { clear: both; float:right; padding-right:250px; padding-top:300px; font-size:15px; 
font-weight:bold; color:#C00; }

#updateForm { clear: both; float:right; margin-top:120px; }

You also need a doctype at the very top of the page, above the <html> tag.

<!doctype html>

Edited September 23, 2012 by Wickham

nK0de · September 23, 2012

If I do that, it moves the label way down like this

Yes, I have specified the doctype in my page. I just removed it when posting the code here.

Wickham · September 23, 2012

Why has #msg got padding-top: 300px? Record added will move up if you delete that.

nK0de · September 23, 2012

That did the trick. Thank you

Sign In

Removing space taken up by padding and margin

Recommended Posts

nK0de

Wickham

nK0de

Wickham

nK0de

Join the conversation

Browse

Activity

Store

Support