Question

Hi again, this time the problem is with css, I’ have a custom object (black rectangle named container) that contains items (red rectangle), each item must contain a litle rectangle (blue) named flag. Until here everithing ok.

here is the css properties:

.container 
{
  overflow:visible;
  position:absolute;
  border:0px solid;
  border-color:Black;
  width:500px;
  height:500px;
}
.Item
{
 overflow:visible;
 border:0 invisible;
 position:absolute;
 z-index:100;
 margin-top:1px;
}

.Flag 
{
 position:absolute;
 width:20%;
 height:20%;
 margin-left:80%;
 margin-top:80%;
 z-index:98;
 opacity: 0.5; 
}

And Here is my Html

<div class="Container" id="CondicionesMostrar" style="left: 0.31em; top: 0.31em; width: 84.75em; height: 44em;">
    <div class="Item" id="I_Cond_1" style="left: 0.06em; top: 0.06em; width: 216px; height: 120px; border-width:thick; background-color:Black;" onclick="alert(Hello');">
        <div class="Flag"></div>
    </div>
</div>

The problem is when the size width is greater than height the flag appear out of Item like the image A and if the height is greater than width it appear as the image B. The Item might have different sizes, the tests was made in Firefox 10.0.2, chromre 17.0.963.79m and IE 9, all of them return the same result.

What is the current way to do this? There is anything bad on my css?

I’m using absolute positions because i need to populate Container with many Items.
There is an alternative to perform this task?

Very tks for your help.

Answer 1

on .Flag, remove:

margin-left:80%;
margin-top:80%;

and change it to:

bottom: 0;
right: 0;