I just learnt javascript and was playing with javascript and css.
In this code ,I wanted to know if there is a way to place the child div's side by side instead of overlapping.
<!doctype html>
<html>
<head>
<style type="text/css">
#parentdiv
{
margin-top: 10px;
height:800px;
width:800px;
position: relative;
border:1px solid black;
}
</style>
</head>
<body>
<script type="text/javascript">
var counter=1;
function create()
{
var newdiv = document.createElement("div");
newdiv.style.width = "100px";
newdiv.style.height = "100px";
newdiv.style.background = "red";
newdiv.style.border = "1px solid black";
newdiv.style.color ="white"
newdiv.innerHTML = counter++;
newdiv.style.position = "absolute";
newdiv.style.float="left";
newdiv.style.top = document.getElementById("textField").value + "px";
document.getElementById("parentdiv").appendChild(newdiv);
}
</script>
Enter position from top:
<input type="text" id="textField">
<input type="button" value="Create child Div " id="new button" onclick="create()"/>
<div id="parentdiv"></div>
</body>
</html>
Stumble It!
Tweet This
Bookmark on Delicious
Share on Facebook
Share on MySpace