Question

I have to create a div that should look like

<div id=1>
<img></img>
<div id=2></div>
</div>

the div with id 2 should appear at bottom-right corner of image, and the size of image is not fixed what should be the css applied to div with id=2

div with id =1 has no position defined so uses default and same is with image and i cannot change these
only div with id=2 is editable to me. Please suggest something

Answer 1

If you cannot edit the CSS for div #1, you’re sort of screwed.

If you could just add {position:relative} to that div, you’d be in business. Absolute positioning will target the first parent with ‘Relative’ positioning. Since the default of div 1 is ‘Static’…Positioning won’t work.

‘Float’ might work, div 2 would technically need to come before div 1 – thus causing div 1 to inherit the float of div 2; however, that would also stack your image atop div 2 rather than below it. … So Float is out as well.

IF you can add CSS to div 1 and div 1 img, then an easy fix is this:

* { margin:0; padding:0 }

#one {position:relative; text-align:right;}
#two {position:absolute; bottom:0; right:0}

Good luck…