Question

I have this code :

HTML

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

CSS

.temperatura
{
    height:34px;
    position:relative;
    background-color:#FF0000;
    font-size:14px;
    font-weight:bold;
}

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

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

I need two linkable element (50% each) with a padding left(first) and right(the second).

The only strategy I know is to make two a (floatted) with internal divs with padding.

But it is "incorrect". So how can I do this?

EDIT

The other solution is just change the internal div (the ones with padding) with span : http://jsfiddle.net/p8Mps/3/

But try to enlarge/decrease the window on IE7 : it will fails…

Answer 1

<a> (anchors) are inline elements.

<div> (divisions) are block level elements.

HTML 4.01 specifications state that <a> elements may only contain inline elements. A <div> is a block level element, so it must not appear inside an <a>.

Never put block level elements inside inline elements.

You would put inline elements inside block level elements instead…

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

EDIT based on OP’s comments…

http://jsfiddle.net/sparky672/p8Mps/9/

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

EDIT 2 based on further comments…

http://jsfiddle.net/sparky672/p8Mps/13/

<div class="temperatura">
    <a href="/link1/" class="temperatura_localita">
        <span>Text1</span>
    </a>

    <a href="/link2/" class="temperatura_dettagli"> 
        <span>Text2</span>
    </a>   
</div>