Take the 2-minute tour ×

i have to create a div that should look like

<div id=1>
<div id=2></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

share|improve this question

6 Answers 6

up vote 1 down vote accepted

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...

share|improve this answer

If you need to position the second DIV on top of the first DIV, then the best solution would be to position the first DIV with position:relative; and then use absolute positioning on the second DIV. The first DIV would have to have a fixed width or to be floated to limit it's width to that of the image.

If you have no way to control the first div, you are in a bit of a tight spot. You still need to make sure that the first div has the same width as the image, either by setting width explicitly or by using a float. You could then position the second DIV with negative margin and using position:relative in conjunction with z-index to make it flow on top of the image. But that would mean you'd have to know the height of the second DIV to make up for that exact amount using negative margin. It would work, but the solution wont be as robust as the first.

If you just need to have the text below the image it's a bit easier, just using plain old floats. I've coded up a very basicc version of all the three scenarios here: http://jsfiddle.net/laustdeleuran/7CnSh/

I hope it's useful.

share|improve this answer
your solution second is good one –  sandeep Jun 16 '11 at 6:42
thanks for the efforts, but as i said i cannot change the css of main div to floast:left or any thing. can u pls suggest any other alternative? –  Varun Jun 16 '11 at 6:42
@Varun - Do you need to position the text on top of the image or below it? Either way it would be very difficult to do this in a robust manner without having any control over the outer div or the image whatsoever. I've tried out @searlea's solution in the fiddle now - jsfiddle.net/laustdeleuran/7CnSh, but it doesn't seem that robust to me. However, I think it's the only way to get it to work with pure CSS and not touching the image or the outer DIV. –  Laust Deleuran Jun 16 '11 at 7:49
say i can add some css to outer div but not float:left and neither position:absolute.. do we still hold a chance to do so i want the child div to be exactly placed at bottom right corner of the outer div. and changing the hieght of outer div using javascript should keep it dynamically move it as well to new location –  Varun Jun 20 '11 at 4:52

I think you are looking for float style.

share|improve this answer

Using numeric ids is a bad idea, so let's say you've called your divs div1 and div2.

As you can't style #div1 or the image, the only thing you might try is setting a negative margin on #div2. Try either one of:

#div1 { display: inline-block; width: 100px; margin-left: -100px }

Or, simply:

#div1 { margin-top: -100px }

Where the 100px values are just arbitrary and you'll need to decide on appropriate values depending on what you're putting in #div2

share|improve this answer

First, some valid HTML. But I guess that wasn't your real HTML?

<div id="div1">
  <img [..] />
  <div id="div2"></div>

You could this with position: absolute and negative margins.

#div1 { display: table; position: relative; }
#div2 {
  position: absolute;
  width: 50px;
  height: 50px;
  margin-top: -50px;
  right: 0;

display: table should make the first div match the width of the image. position: relative so the second div will position itself relative to first div.

This might work (not sure of relative+table). But I haven't tested it. If it does't work, I suggest that you work with JS to position the second div, it's very easy.

share|improve this answer

try this:

<div id="d1">
<img src="https://encrypted.google.com/images/logos/ssl_logo_lg.gif"></img>
<div style="margin-left:225px;margin-top:-25px;z-index:1000;position: relative;" id="d2">Your Text</div>

you can play with the margin-left and margin-top

share|improve this answer

Your Answer


