how to place a division( using <div> tag) at a particular location

**janunme** · 04-24-2007, 05:25 AM

hi to all

i want to place a division(using <div> tag) at a perticular location(x,y). is it possible. if possible please tell me how to do it.

regards

**Bob90** · 04-24-2007, 05:46 AM

<div id="divid" style="position:absolute; left:400; top:300;">Hello World</div>

<script>
document.getElementById("divid").style.position = "absolute";

document.getElementById("divid").style.left= "200";

document.getElementById("divid").style.top= "30";
</script>

**janunme** · 04-24-2007, 06:04 AM

thanks fo ryou reply

**tech_support** · 04-24-2007, 06:53 AM

Originally Posted by Bob90

<div id="divid" style="position:absolute; left:400; top:300;">Hello World</div>

<script>
document.getElementById("divid").style.position = "absolute";

document.getElementById("divid").style.left= "200";

document.getElementById("divid").style.top= "30";
</script>

Don't forget "px". And the type attribute for <script>

Code:

<div id="divid" style="position:absolute; left:400; top:300;">Hello World</div>
<script type="text/javascript">
document.getElementById("divid").style.left= "200px";
document.getElementById("divid").style.top= "30px";
</script>

**codeexploiter** · 04-24-2007, 07:24 AM

Try the following code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Dyanmic Div</title>
		<script type="text/javascript">
		function placeTheDiv(leftspace,topspace,wid)
		{
			var divobj = document.createElement("div");
			divobj.style.position = "absolute";
			divobj.style.left = leftspace;
			divobj.style.top = topspace;
			divobj.style.border = "1px solid #000";
			divobj.style.width = wid;
			
			document.body.appendChild(divobj);
		}
		
		function init()
		{
			var left = parseInt(prompt("Enter the width you want on the left side"));
			var top = parseInt(prompt("Enter the width you want on the top side"));	
			var width = parseInt(prompt("Enter the width you want for the new div block"));
			
			placeTheDiv(left,top, width);			
		}
		</script>
	</head>
	<body>
	<a href="#" onclick="javascript:init();">Click To Add a Div</a>
	</body>
</html>

The above code will create and place a div block dynamically and the script asks for the configurations from the user itself. Click on the link available to add the div blocks and enter the configurations too.

Thread: how to place a division( using <div> tag) at a particular location

Thread Tools

Search Thread

how to place a division( using <div> tag) at a particular location

YEs

Bookmarks

Bookmarks

Posting Permissions