Linking a div without javascript?

Question

It's a very simple question, you may say that i can do this:

<a href="link"><div></div></a>

but when i hover the div (110x74)px it hovers all across the width of the page, as if the div has a width of 100%, so when i click on blank part of the page it acts like if there's a link there, ideas? thanks

I also tried with javascript and it worked but many smartphones can't support it.

Read [Is putting a div inside an anchor ever correct?](http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct), HTML 4.01 specifies that elements may only contain inline elements. A
is a block element, so it may not appear inside an . — Satpal, Apr 23 '14 at 10:06
Just FYI, it can be done with `onclick` and remove the need for `a` tag. — Gil, Apr 23 '14 at 10:11
I think This helps http://stackoverflow.com/questions/4465923/a-href-link-for-entire-div-in-html-css — kjames, Apr 23 '14 at 10:11
@Gil yeah but i don't want to use js because many devices do not support it — nick, Apr 23 '14 at 10:13
@nick I have solved your problem. Please see my answer below. — uSeRnAmEhAhAhAhAhA, Apr 23 '14 at 10:23
@nick really? most mobile devices have more advanced browsers than stationary devices, due to consistent updates. The only reason today that a mobile device doesn't support js is because it was intentionally disabled, and that will cause practically almost all sites to work incorrectly (or not at all). If you have some restrictions you have to work by then it's another thing. — Gil, Apr 23 '14 at 10:26

patrick · Accepted Answer · 2014-04-23T11:58:08.783

1

don't know what you want exactly? this JSFiddle shows a DIV with the given dimensions and it works as you require... you might want to elaborate some more on what it is you're looking for...

CSS:

.test{
    width: 110px;
    display: block;
}

.test div{
    height: 74px;
    border: 1px solid black;
}

HTML:

<a href='#' class='test'><div></div></a>

edited Apr 23 '14 at 11:58

answered Apr 23 '14 at 10:15

patrick

11,519
8
71
80

yeah but look that if you hover the blank part next to the div it acts like a link – nick Apr 23 '14 at 10:16
tried that, i solved the problem for the web version so thanks! – nick Apr 23 '14 at 10:25

score 0 · Answer 2 · answered Apr 23 '14 at 10:18

0

http://jsfiddle.net/nNA7G/7/

HTML:

<a href="stackoverflow.com"><div><p>hi lol</p></div></a>

CSS:

a
{
    width: 100px;
    height: auto;
}

div
{
    width: 80px;
    background-color: khaki;
}

answered Apr 23 '14 at 10:18

uSeRnAmEhAhAhAhAhA

2,527
6
39
64

still the same problem, i'm starting to think i'm the only one who have it – nick Apr 23 '14 at 10:22
@nick Please tell me which browser and which version of that browser you're using. – uSeRnAmEhAhAhAhAhA Apr 23 '14 at 10:24

score -1 · Answer 3 · answered Apr 23 '14 at 10:14

-1

if I understand you problem -since my english language is week-, I think if you set wrapper for link and set link as diplay: inline-block .. the width will be exactly, and you can increase width any time as block ..

use display block or inline-block will resolved width problem ...

good luck, and sorry if not that what you mean ..

Good luck mate ^^

answered Apr 23 '14 at 10:14

Anees Hikmat Abu Hmiad

3,460
2
19
36

gonna try that ,anyway, with that i have to search for another way to align it to the center with a smaller screen, since it's a responsive page – nick Apr 23 '14 at 10:17

Linking a div without javascript?

3 Answers3