Sto provando a realizzare 2 pulsanti da mettere su un sito, il risultato finale dovrebbe essere il seguente



Riesco a riprodurre questo layout, il problema è che i link funizonano solo se passo sulle scritte o sulle immagini, vorrei invece che sia possibile cliccare ovunque all'interno dell'area che definisce i link.

Il codice che ho usato è il seguente (uso Bootstrap 3), mostro solo quello per il carrello, l'altro è equivalente

codice:
<ul class="nav navbar-nav">
    <li>
        <a href="carrello" >
            <div class="pull-left">
                <img src='static/images/carrello.png' alt='cart image'/>
            </div>
            <div class="pull-left" style="margin-left: 5px">
                <div style="font-weight: bold;font-size: 1em;color:black;line-height: 16px">Carrello</div>
                <div style="font-size: 0.7em;color:black;line-height: 14px">Carrello vuoto</div>
            </div>
        </a>
    </li>
</ul>
Ho capito che ad impedirmi di avere tutta l'area cliccabile sono i div dentro il tag <a>, infatti rimuovendoli posso cliccare ovunque, non necessariamente sulle scritte o sull'immagine.
Togliendo quei div però mi perdo il layout voluto e non saprei come ottenerlo.

Come dovrei fare per mantenere quel layout e poter cliccare in qualsiasi punto dell'area che definisce quei 2 link?