CSS Parent anchor tag's display on children anchor tags?

Question

I have something like following

<a class="item" href="a.htm">
  <div class="title">abcd</div>
  <div class="body">abcd</div>
</a>

with the following style

a.item {
  display:block;
}

As soon as I add another anchor tag inside a.class,

<a class="item" href="a.htm">
  <div class="title">abcd</div>
  <div class="body">abcd</div>
  <a class="child" href="b.html">child</a>
</a>

even though I have

a.child {
  display:inline
}

it breaks the child into a separate block. How do I go around this?

Answer 1

ericbae is right you cannot use tag within a tag. Other important thing you are applying tag over a div, it may not work in Internet Explorer. SO be carefull.

Answer 2

You cannot nest <a> elements. Replace either of the <a> with <span>. Since you've got two href attributes, I assume that you want the following effect:

Demo: http://jsfiddle.net/jE6Dm/

CSS:

a.item span {
  display:block;
}

HTML:

<div>
  <a class="item" href="a.htm">
      <span class="title">abcd</span>
      <span class="body">abcd</span>
  </a>
  <a class="child" href="b.html">child</a>
</div>