Hi The following is my code. In this 2nd and 3rd divs are overlapping. I am not sure why? 3rd div is relative so it has to start relative to second div, that means it has to be after the 2nd div but why they are overlapping?

<body style="margin-left:60px">
        <form action="./Voting Topic_files/Voting Topic.htm" method="post">  
            <div style="position:relative;left: 0px; top: 0px; width: 970px; height: 30px;text-align:center;text-decoration:         
                           underline;"><h2>Create Voting Topic</h2>
            <div style="position:relative;left: 0px; top: 40px; width: 970px; height: 30px;background-color:lightgreen;border-
                  style:solid;border-width:1px;line-height:30px ">
                       <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  The Voting Topic Has Been Created Successfully.</b>
            <div style="position:relative;top:0px;height:270">
                <div style="position:absolute;left: 0px; top: 0px; width: 970px; height: 190px;">
                    <div style="position:absolute;left: 0px; top: 80px; width: 300px; height: 30px"><b>Topic That Should Be Open 
                       For Voting :</b>
                    <div style="position:absolute;left:300px;top: 0px; width: 670px; height: 190px;"><textarea rows="10" 
                         cols="80" name="votingTopic.votingTopic"></textarea>

Edited by yaragalla_mural

4 Years
Discussion Span
Last Post by JorgeM

Can you explain if there is some requirement with using absolute and relative positioning in this case? I don't recommend it for div elements unless there is some specific need.


yes thre is. 2nd div grows dynamically. based on some conditions the height of the 2nd div may vary. so what ever the height of the 2nd div may be but the 3rd div has to start next to 2nd div. they should not overlap. 2nd div is also relative so it starts next to 1st div , likewise the 3rd div should be but why there is variation? what is the reason? Another most important thing is i need to understand how relative and absolute works exactly.


A relative positioned element is in a position relative to its normal position. The reserved space for the element is still preserved in the normal flow. However, an absolute position element is positioned relative to its first parent element that has a position other than static. Absolutely positioned elements are removed from the normal flow.

I've copied your code and I'm looking at it, but I'm not following your design flow according to your description... it may be helpful to have a diagram of how you want it to look like. If you want divs to be placed next to each other, there are other ways of doing it.. floats, changing the display to inline, etc...

Edited by JorgeM


Hi if you have saved my code as html you will be able to see the green color div and the next div which contains a textarea overlapping. See i want 2nd and 3rd div next to each other without overlapping. This relative positioning has been used so many places now i cannot change. In all the other places it works fine but here it is problem. when i say relative the 3rd div should be in relative to the 2nd div right? It is happening between 1st and 2nd div. so why is it not happening between 2nd and 3rd div. If you observe there are only 3 main div's in my code. So if any body can help me understanding why 2nd and 3rd div are overlaping that would be great.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.