Home/ Questions/Q 6853417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T01:30:35+00:00

In the code below I added input button to the leftPane div. Here I

  • 0

In the code below I added input button to the leftPane div.
Here I have two div’s/ Left 80% and right 20%.
Now I want to position this button to be vertically in the middle and on the right side in the leftPane.
But it when I set ‘right:0;’ it goes to the right side of the browser, and not of the right side of the leftPane.
Why?

<body style="overflow:hidden;">

        <div  style="background: #ff0000; position: fixed; top:0; left:0; width:100%; height:100%;">
            <div id="leftPage" style="width:80%; height:100%;background:#00ff00; float:left;text-align:center;">
                <img src="http://fc07.deviantart.net/fs45/f/2009/106/c/1/HD_Nature_Wallpapers_by_CurtiXs.jpg" alt="test" style="max-width:90%; max-height:90%;"/>
                <input type="submit" value="Next" style="width:40px;height:70px;position:absolute;top:50%;right:0;"/>
            </div>
            <div id="rightPane" style="width:20%; height:100%;background:#0000ff; float:left;">
                <div id="commentBox" style="background:#dddddd; width:90%; height: 50px;">
                    <input type="text" placeholder="Enter here..." />
                </div>
            </div>
        </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to have the parent <div style="position: relative;"> otherwise your absolute positioning is defaulting to your <body>

    To clarify, set #leftPage to relative positioning.

    • 0