Positioning Text Of Anchor Within A Div

Given the markup

Cattle Farms

And style #header { width: 960px; height: 200px; margin-bo

Solution 1:

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

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

And add these additional styles:

#headeraspan {
padding-left: 20px;
padding-bottom: 20px;
}

EDIT:

Also, add overflow: hidden to the header.

#header {
overflow: hidden;
}

Solution 2:

You need to specify position: relative on the parent container:

CSS:

#header {
  position: relative;

  width: 960px;
  height: 200px;
}

#headera {
  position: absolute;

  bottom: 20px;
  left: 20px;
}

Solution 3:

I would recommend taking away the 100% width and height. By doing this, you'll be able to place it within the header. If you don't, you're expanded to the size of the header, so there's no room to change your placement.

Since it's a block element, you can do this a few ways. You can either use margin to "push" it away from other elements (if you decide to add more on top of it). Or you can you use "position: relative" and "top" or "left". I would recommend using this with a %. I tried this code and it achieved the effect you were looking for I think:

#header{
width: 960px;
height: 200px;
}

#headera {
display: block;
position: relative;
top: 95%;
}

Solution 4:

Well. I have no idea why this works. But it does

div#headera
{
width: 100%;
height: 100%;
display: block;
text-indent: 20px;
line-height: 350px;
}