Question

I have this code :

HTML (meaning 4.0)

<div class="temperatura">
    <a href="/link/" class="temperatura_localita">
        <span style="padding-left:12px;">
            Text1
        </span>
    </a>
    
    <a href="/link/" class="temperatura_dettagli">
        <span style="padding-right:70px;">            
            Text2
        </span>
    </a>        
</div>

CSS (meaning 2)

.temperatura
{
    height:34px;
    position:relative;
    background-color:#FF0000;
}

.temperatura_localita
{
    width:50%;
    height:34px;
    line-height:34px;
    float:left;
}

.temperatura_dettagli
{
    width:50%;
    height:34px;
    line-height:34px;
    float:left;
    text-align:right;
}

and this is what I need :

• the container temperatura is linked to /link/;
• each a are 50%, and the link got a padding (left or right);

on Firefox/Chrome/IE8/IE9 there arent problem. On IE7, increasing/deacresing (horizontal) the window, the second link got a new line.

Why? And, how can I fix this?

Answer 1

I think this is because of your 50%/50% division. IE7 is pushing the second link to a new line when the pixel count of the div is odd, but maintaining the correct position when it’s even. Changing both widths to 49% solves the issue.