3 Replies - 3489 Views - Last Post: 24 September 2012 - 11:34 AM

#1 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 205
  • View blog
  • Posts: 823
  • Joined: 21-December 11

HTML elements position changes when new elements appear

Posted 22 September 2012 - 07:33 AM

I have a webpage which initially looks like this.

Posted Image

HTML code of the page

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</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>

<form id="frmAddService" name="Add" method="post" action="">
<table width="300" border="0">
  <tr>
    <td><label for="sid">Service ID</label></td>
    <td><input id="sid" 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 id="name" type="text" name="name" /></td>
  </tr>
  <tr>
    <td><label for="cost">Cost</label></td>
    <td><input id="cost" type="text" name="cost" /></td>
  </tr>
  <tr>
    <td><label for="active">Active</label></td>
    <td><input id="active" type="checkbox" name="active" /></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="reset" value="Cancel" /> <input type="submit" value="Save" name="btnsave" /></td>
  </tr>
</table>
</form>

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

</body>
</html>



When clicked upon a link, a small form appears to the right side of the page.

Posted Image

Posted Image


The problem is when that happens that line which reads Record added also moves to the middle.

These are the CSS rules I've written to position them.

#msg { float:right; padding-right:250px; padding-top:300px; }   //the 'Record Added' line

#frmAddService { float:right; padding-right:250px; padding-top:150px; }  //the form



How can I make that line's position fixed when the form appears?

Thank you.

Is This A Good Question/Topic? 0
  • +

Replies To: HTML elements position changes when new elements appear

#2 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 239
  • Joined: 22-November 10

Re: HTML elements position changes when new elements appear

Posted 22 September 2012 - 11:28 PM

You could use position: absolute and margin-top: 300px (instead of padding-top) on #msg.
Was This Post Helpful? 0
  • +
  • -

#3 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 205
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: HTML elements position changes when new elements appear

Posted 22 September 2012 - 11:50 PM

Then the line comes down and sticks to the left side even when its floated to the right

Posted Image
Was This Post Helpful? 0
  • +
  • -

#4 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 239
  • Joined: 22-November 10

Re: HTML elements position changes when new elements appear

Posted 24 September 2012 - 11:34 AM

right: 0 should keep the box on the right side of the page. You may need to change the right padding though to margin instead and possibly use position: relative depending on your layout.

This post has been edited by exiles.prx: 24 September 2012 - 11:34 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1