Search code examples
htmlpositionalignment

How to align a div to the right?


i want to alignt a image, that is in front of another image, to the right.

In this example the little google image is on the upper left but i want it to be on the upper right:

http://jsfiddle.net/2NYve/

i already tried float: right and align="right" but that doenst work. As you can see in the example the background is a object with a svg but for this example i simple put a image at this place, i think there should be no different.

<div id="divSvgView" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;">
<!--foreground-->
    <div style="float:right;width:30px; height:30px;position: absolute; z-index:5000"><a href="javascript:goToLastNodeDiv()"><img class="mapImage" src="https://www.google.de/images/icons/product/chrome-48.png" /></a></div>
<!--background-->
    <div style="width:100%; position: absolute; z-index:100"><img class="mapImage" src="https://www.google.de/images/srpr/logo4w.png" />
    <!--<object type="application/xhtml+xml" id="svgObject" data="" style="width:100%; height:100%;margin:1%;"></object>--></div> 


Solution

  • Add (Where 20px is the width of your image)

    right: 20px; 
    

    to the image. That's the only way as far as I know if you use absolute positioning

    http://jsfiddle.net/2NYve/1/