Here is a code snippet that I am working with:
HTML (version 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 (version 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;
}
I am looking to achieve the following:
- The container
temperaturashould be linked to/link/; - Each
aelement should take up 50% of the width, and have padding either on the left or right side;
Everything seems to work fine on Firefox, Chrome, IE8, and IE9. However, when testing on IE7 by resizing the window horizontally, the second link wraps to a new line.
Why is this happening and how can I resolve it?