CODEWITHSUNDEEP
htmlcss
PM.
PM.

Reputation: 1721

Move the image at right side of the div

I am trying to add a div on top of another div as an overlay which will move out of the screen with the click of the image. I am trying to get the image on the right corner, but it disappears if I set it to float: right.

enter image description here

<div id="parentDiv" class="col-md-3" style="position: relative; z-index: 5000 !important; left: 0px;">
        <div style="position: relative; top: 43px !important;
                    left: 0 !important; z-index: 5000!important;
                    background-color: #FFDAB9;width: 16%;">
            <div style="width:88%;background-color: red; " id="goToDiv">
                <div class="col-md-12" style="background-color: green;z-index: 50000;padding: 6px;">
                    <label>Section</label>
                    <select style="float: right;" name="ddlSection" wtx-context="AF97546D-94C2-4017-89B7-42826F695331">
                        <option>Section 1</option>
                        <option>Section 2</option>
                    </select> 
                </div>
                <div class="col-md-12" style="background-color:slateblue;padding:6px;">
                    <label>Page No.</label>
                    <input style="float: right;width:100px;" type="text" placeholder="Page No." name="txtDesiredPageNum" wtx-context="BF8712F3-BABD-45CB-B001-03BBE1AF3F67">
                </div>                
                <input type="button" value="Go!!" id="btnGotoPage" onclick="GotoPage(document.getElementsByName('txtDesiredPageNum')[0].value);" wtx-context="7D444472-408D-4252-BD1E-21003A7AAC74">
            </div>
            <span style="width:10%;/* float:right; */right: 10px !important;" onclick="hideBox();">
            <img src="/static/assets/img/arrows.png" style="width: 12%;top: 10px !important;/* float: right; */right: 10px !important;">
            </span>
        </div>
    </div>

Upvotes: 0

Views: 55

Answers (1)

AG_
AG_

Reputation: 2689

add display: block and margin:auto to image

or you can wrap the image in a div and use text-right class if you are using bootstrap

<div id="parentDiv" class="col-md-3" style="position: relative; z-index: 5000 !important; left: 0px;">
        <div style="position: relative; top: 43px !important;
                    left: 0 !important; z-index: 5000!important;
                    background-color: #FFDAB9;width: 16%;">
            <div style="width:88%;background-color: red; " id="goToDiv">
                <div class="col-md-12" style="background-color: green;z-index: 50000;padding: 6px;">
                    <label>Section</label>
                    <select style="float: right;" name="ddlSection" wtx-context="AF97546D-94C2-4017-89B7-42826F695331">
                        <option>Section 1</option>
                        <option>Section 2</option>
                    </select> 
                </div>
                <div class="col-md-12" style="background-color:slateblue;padding:6px;">
                    <label>Page No.</label>
                    <input style="float: right;width:100px;" type="text" placeholder="Page No." name="txtDesiredPageNum" wtx-context="BF8712F3-BABD-45CB-B001-03BBE1AF3F67">
                </div>                
                <input type="button" value="Go!!" id="btnGotoPage" onclick="GotoPage(document.getElementsByName('txtDesiredPageNum')[0].value);" wtx-context="7D444472-408D-4252-BD1E-21003A7AAC74">
            </div>
            <span style="width:10%;/* float:right; */right: 10px !important;" onclick="hideBox();">
            <img src="/static/assets/img/arrows.png" style="width: 12%;top: 10px !important;/* float: right; */right: 10px !important;">
            </span>
        </div>
    </div>

Upvotes: 1

Related Questions