Ganze Zeile füllen: Nicht Block, Nicht 100%

[Carrear]

Hallo meine lieben. Ein Element (ein Link) soll eine ganze Zeile füllen. Allerdings kann ich dafür weder das display: block; Attribut noch width: 100%; nutzen, denn das Element kann auch neben einem gefloateten Bild Erscheinen und würde dann die ganze Breite (auch hinter dem Bild) füllen bzw. unter das Bild rutschen. Ich will folgendes Erreichen. Es soll am Ende so aussehen wie im Anhang. Also Ich habe einen Link den ich so gestalte:

<a class="more" href="<?php print $node_url; ?>"><div>zum Artikel</div></a>

Die Klassen dazu sehen so aus:

a.more {
display: inline-block;
border-top: 1px solid #A7A7A7;
}

a.more div {
padding-left: 20px;
background-color: #FFF;
background-image: url('../img/pfeil.png');
background-repeat: no-repeat;
margin-top: -10px;
width: 100%;
}

Wie kann ich das realisieren?

 

[Carrear]

Lustigerweise hatte das hr Element (und nur das) genau die Eigenschaft die ich wollte. Es breitet sich automatisch auf die voll Breite aus die neben einem gefloateten Element noch übrig ist. Deshalb habe ich das jetzt einfach sowohl im HTML als auch im CSS umstrukturiert:

<hr class="more"><a class="more" href="<?php print $node_url; ?>">zum Artikel</a>

a.more {
display: inline-block;
padding: 0 5px 0 20px;
background-color: #FFF;
background-image: url('../img/pfeil.png');
background-repeat: no-repeat;
position: relative;
top: -11px;
}

hr.more {
margin-top: 15px;
height: 1px;
overflow: hidden;
border-width: 1px 0 0 0;
border-color: #A7A7A7;
}

Macht genau das was es machen soll