making span tag cover entire width of div

Question

I have the following structure for html:-

<div>
  <span>
    <a href="wherever">Wherever</a>
  </span>
</div>

If I want the span to cover the entire width of the div, how can I do that in chrome?

I tried in css using

span{
  background:#FFF;
  width:100%;
}

It works in firefox and ie but not in chrome.

Answer 1

span elements are inline. Inline elements adjust their width automatically and ignore your width: expressions.

Make it block-level:

span {
    display: block;
}

But then it's basically just a <div>.

Answer 2

There are two ways to resolve your issue.

As span tags adjust their width according to the contents in it. So to assign width to this tag we will use float left with width.

span{
 background:#FFF;
 width:100%;
 float: left;
}

secod way is to use display block with the code

 span{
 background:#FFF;
 width:100%;
 display: block;
}

Answer 3

Change span's CSS to:

span {
display: block;
}