Member Avatar for yaragalla_mural

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>
            <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>
            <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>
                    <div style="position:absolute;left:300px;top: 0px; width: 670px; height: 190px;"><textarea rows="10" 
                         cols="80" name="votingTopic.votingTopic"></textarea>
                    </div>
                </div>               
            </div>
        </form>  
</body>
Edited by yaragalla_mural
  • 2 Contributors
  • 6 Replies
  • 125 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for 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.

Member Avatar for yaragalla_mural

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.

Member Avatar for JorgeM

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
Member Avatar for yaragalla_mural

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.

Member Avatar for yaragalla_mural

I have worked out and found the solution. Thanks for all your help.

Member Avatar for JorgeM

Ok, glad you solved your problem.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.