please help me out in positioning div's using css

Question

1.00/5 (1 vote)

See more:

I just learnt DOM in 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()"/>

</body>
</html>

Posted 2-May-15 10:21am

Member 11659545

Add a Solution

Comments

Afzaal Ahmad Zeeshan 2-May-15 16:29pm

Where actually is the problem? You forgot to mention the actual problem you are facing.

For a side-by-side approach, you might consider using, float: right, float: left and el1, el2 { display: block }. This would do the trick.

Sergey Alexandrovich Kryukov 2-May-15 17:14pm

There can be many related problems with that. Please see Solution 1.
—SA

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-05-02T11:13:00

Solution 1

"Side by side" could be understand differently; there are many subtle detail, such as vertical alignment; do you need to fill in the horizontal space or not, how; if you need a match of height or not, and so on. Thy this pretty elegant ans simple solution.

HTML

<html>
    <head>
        <title>Some title</title>
        <style type="text/css">
            div { padding: 1em; }
            div.parent { display: table; }
            div.left { display: table-cell; border: solid 2px red; }
            div.right { display: table-cell; border: solid 2px green; }
        </style>
    </head>
<body>

<div class="parent">
<div class="left">Left<br/><br/>&hellip;to demonstrate<br/>different<br/>contect height<br/></div>
<div class="right">Right</div>
</div>

</body>
</html>

If your requirements are different, feel free to ask further questions.

—SA

Posted 2-May-15 11:13am

Sergey Alexandrovich Kryukov

Comments

Member 11659545 2-May-15 22:27pm

No I want to align the boxes vertically as my program is already doing. But in case of overlapping, I want the divs to be side by side.

Sergey Alexandrovich Kryukov 2-May-15 22:31pm

Vertically? It's weird. This is not what's called "side by side"? What's the problem with vertically? How can it possibly overlap? All right, describe how exactly it should look and behave.
—SA

Member 11659545 2-May-15 23:19pm

suppose I enter 100, 220 and 150 in the input field. Then, I want the first div to be 100px from the top of parent, 2nd div 220px top from parent and 3rd div 150 px top from parent.There was no overlapping till I placed 2nd div. But as soon as I place the third div, there was an overlapping of all the 3 divs. So I want the third div to be 150px from top but not aligned in the same column.. Instead It should be placed right to the div1 and div 2

Sergey Alexandrovich Kryukov 3-May-15 10:55am

From parent? Then also depict parent-child relationship. But this sounds quite trivial. Use default positioning and modify margins in JavaScript. There is no overlapping in simple HTML, ever, it happens only if you try to do tricks.
—SA

please help me out in positioning div's using css

1 solution

Solution 1

Add your solution here

Preview 0

please help me out in positioning div's using css

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us