Question

Given the markup

<div id="header">
<a href="cattle.html" class="current">Cattle Farms</a>
</div>

And style

#header
{
width: 960px;
height: 200px;
margin-bottom: 20px;
}

#header a
{
width: 100%;
height: 100%;
display: block;
font-size: 25px;
}

How whould I go about placing/positioning/aligning the text “cattle farms” so that it sits 20px from the left and 20px from the bottom in such a manner that it does not break the a out of the div visually even when looking it with Firebug.

Answer 1

You could simply add a <span> to the anchor and add some padding to that. Like this:

<div id="header">
  <a href="cattle.html" class="current"><span>Cattle Farms</span></a>
</div>

And add these additional styles:

#header a span {
padding-left: 20px;
padding-bottom: 20px;
}

EDIT:

Also, add overflow: hidden to the header.

#header {
overflow: hidden;
}