How to make a whole 'div' clickable in html and css without javascript? [duplicate]


Tags: html,css,click

Problem :

This question already has an answer here:

I want to make it so that a whole div is clickable and links to another page when clicked without javascript and with valid code/markup.

If I have this which is what I want the result to do -

<a href="#">
<div>This is a link</div>
</a>

The W3C validator says that block elements shouldn't be placed inside an inline element. Is there a better way to do this?



Solution :

a whole div links to another page when clicked without javascript and with valid code, is this possible?

Pedantic answer: No.

As you've already put on another comment, it's invalid to nest a div inside an a tag.

However, there's nothing preventing you from making your a tag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:block on your a tag and size / float it however you like.

If you renege on your question's premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.


    CSS Howto..

    How to set background image for body tag using css?

    Css styling without !important - how to do this?

    How to don't include the google font css in one specific button only?

    How can i use “z-index” as an css attribute selector?

    How to design a full width bar with HTML and CSS [closed]

    SF2 how to import css / js?

    How to color a responsive table in Bootstrap?

    HTML / CSS - How to remove a gap between the header and a horizontal menu

    How to change lines in an angularJS+Bootstrap?

    Does Modernizr.js help in showing css 3 and html 5 on older browsers and how?

    How to apply disabled style of ASP.net dropdownlist

    How to change css class for multiple DOM elements with jQuery? [closed]

    How to make button look like a link?

    Want to override Bootstrap, but how to avoid the use of !important?

    How to apply CSS to 2x2 classes?

    How do I style the Nivo Slider thumbnails?

    How to make the Div fixed at a particular scroll location?

    How to make a simple plus one voting system in code igniter

    How to make CKEditor render text with a CSS?

    How to resize a div on drag? [Issue with rotation]

    How to scope efficiently javascript et css on a rails appliacation?

    How do I adjust the spacing around the sides of list items in jquery mobile

    How to Properly Add CSS in a MailMessage

    How to make specific line cut-off points without using
    breaks because it fails responsive design

    How to set style of active page number in ASP.NET GridView Pager?

    How can I add CSS animation to an element on a web page? [closed]

    how to remove backgrount property of a div from css through jQuery? [duplicate]

    How exacty works the display: flex property on a container div and the flex property on its inner div?

    How can I apply styles to a label whose checkbox is checked using only CSS?

    How to transform a button into this styled button