Question

How can I align the red box on the right ? I tried using relative and margin but each browser aligns them differently. Some align them farther up and others farther down.

<ul><li>
<img src="" >
<div class="one"></div>
<div class="two"></div>
</li><li>
<img src="" >
<div class="one"></div>
<div class="two"></div>
</li><li>
<img src="" >
<div class="one"></div>
<div class="two"></div>
</li><li>
<img src="" >
<div class="one"></div>
<div class="two"></div>
</li></ul>

li {float: left;}
div.one {position: relative; top: 1em; left: 2.5em; width: 5em;}
div.two {position: relative; top: -5em; left: 10em; width: 5em;}

Example Image

Answer 1

Welcome to SO, Jane.

Here’s one way to do this… using display:inline-block;

li{
    float: left; 
    background:black; 
    border:1px solid green; 
    width:55px;
}

li img{
    display:block; 
    width:55px; 
    margin:0 auto;
}

div.one, div.two{
    background:red; 
    display:inline-block; 
    height:20px; 
    width:20px; 
    margin-left:3px;
}

Note: you will need to adjust the measurements to suit your situation.

Example: http://jsfiddle.net/jasongennaro/SctmD/1/