Do more on the web, with a fast and secure browser!

Download Opera browser with:

  • built-in ad blocker
  • battery saver
  • free VPN
Download Opera

Does an anchor <a> around a block-level <div> work with CSS styling as expected?

  • I'm in the process of building a new HTML5 website with my own backend and Boostrap 3.3.7 as responsive framework.

    The site is 'mobile first' and presents lists of clubs to users - as its intended primarily for mobile I use summary blocks that tap through to detailed views.

    The summary blocks are in the form of an anchor <br>w<a>rapped around a block-level </a><div><a> and this renders fine on Chrome, Firefox and IE but doesn't work on Opera - or at least doesn't with my website.

    When I say 'doesnt work' I mean that the block level </a><div><a> part works in-so-much-as they are clickable and go to the href in the anchor but no style from the CSS is applied to the </a><div><a> leaving them naked.

    There is no style applied to the outer anchor </a><a> but there is style applied to the wrapped <div> and it is this styling that appears to be missing.

    The HTML and CSS pass validation on W3C with no warnings.

    Any ideas?