A tag with Div tag

Question

This is my code

<a href="https://www.w3schools.com">
    <div style="width:200px; border:1px solid black;">
        Visit W3Schools.com!
    </div>
</a>

My div width is 200PX. But my link is activated right side of the white space. How to activate link only within the div width, ie within 200px?

if you want to have accurate detail about what is happening and why it covers the whole width, check this: https://stackoverflow.com/a/758491/8620333 and here is a demo to show you that it's more complex than what you might think: https://jsfiddle.net/L8u3eghf/ — Temani Afif, Aug 13 '22 at 08:38

score 2 · Answer 1 · answered Aug 13 '22 at 08:03

2

Depending on what you're trying to do:

<a style="display:inline-block;" href="https://www.w3schools.com"><div style="width:200px; border:1px solid black;">Visit W3Schools.com!</div></a>

Or

<a style="display:block; width:fit-content;" href="https://www.w3schools.com"><div style="width:200px; border:1px solid black;">Visit W3Schools.com!</div></a>

answered Aug 13 '22 at 08:03

Ouroborus

16,237
4
39
62

Yes it is working now. My question is: Why to add inline-block? – Asif Iqbal Aug 13 '22 at 08:07
3

`` is normally `display: inline` and `
` is normally `display: block`. You're not supposed to put block-level elements inside of inline elements. It seems there's a quirk in this case where doing so causes the `` to extend as far as it can when there's a `
` inside of it. Normally this would be expected since block-level elements are normally full width. You've set a width on the `
` so the `` should shrink to match. But it doesn't. The CSS I added makes the desired behavior explicit.
– Ouroborus Aug 13 '22 at 08:14

score -2 · Answer 2 · answered Aug 13 '22 at 08:36

-2

Instead of nesting the div in the a- element, make it its parent.

<div> <div style="width:200px; border:1px solid black;">
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
</div>

Have fun coding!

answered Aug 13 '22 at 08:36

Jasper Ruijs

11
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 17 '22 at 16:59

score -2 · Answer 3 · answered Aug 13 '22 at 08:52

-2

Try This:

<div style="width:200px; border:1px solid black;">
    <a style="display:flex; width: 100%;" href="https://www.w3schools.com">
        Visit W3Schools.com!
    </a>
</div>

answered Aug 13 '22 at 08:52

Levan Gogoladze

31
2

A tag with Div tag

3 Answers3