CODEWITHSUNDEEP
htmlcss
Markus
Markus

Reputation: 1485

How to place a img in the right bottom corner of a div

alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg

This is what I want to do. A Div with some text in it and on the right bottom corner a img. The hight of the div is stable at 24px but the length is not known and there could be more than one of this divs In a row.

Upvotes: 20

Views: 42258

Answers (4)

danish_wani
danish_wani

Reputation: 872

<div class='main'>
    <div>...</div>
    <div>...</div>
    <div class="img-div">
      <img src="....">
    </div>
</div>


div.main { 
   height: 1164px;
   width: 900px; 
}
div.img-div {
   position: absolute;
   top: 1084px;
   left: 817px;
   margin: .75rem;
}

Assuming dimensions of the image are 57*55

enter image description here

Upvotes: 0

Dustin Poissant
Dustin Poissant

Reputation: 3418

If you want to float the text around the image, both of those answers are wrong. Both will make the text go right over the image. I have been looking for hours and no real answer appears to exist. This article more clearly explains why both of those answer will not work if your attempting wrapping the text.

Upvotes: 0

n1313
n1313

Reputation: 21381

Background image is your solution.

<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>

You may need to adjust paddings of the div, too, so the contents of the div doesn't overlap your picture, if this is needed.

Upvotes: 0

cletus
cletus

Reputation: 625077

There are a couple of techniques of doing this. The simplest:

<div class="outer">
<img src="....">
</div>

with

div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }

Now that takes it out of the normal flow, which is a problem is you want other content to wrap/float around it. In that case you really need to know the height of the image and then apply appropriate tricks depending on what you've got.

Start with Making the absolute, relative.

If the image is 10 pixels high, for example, you could try this:

div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }

Of course 14px comes from 24px - 10px. I don't know if that will satisfy what you're trying to achieve however.

Upvotes: 33

Related Questions