When wrapping a DIV in an anchor tag the layout gets messed up?

Question

So I have been given the task of mocking up a new bootstrap version of the building floor map on the web and while trying to make a DIV area clickable and linking to another page, the anchor tag used to make the link makes the div layout messed up?

Here is my code and an image

before I add the anchor tag around the div

after I add the anchor tag around the div

    <div class="container">
  <div class="row">
<a href="floor0.html">
    <div class="item col-lg-4">

<p> floor zero </p>

<br>
<br>
<br>
<br>

    </div>
</a>

We can't really help with this, it's just CSS but you haven't shown us the relevant parts. You need to debug this one yourself. If you are really stuck, then you should ask one of your colleagues. — DavidG, Jan 08 '19 at 11:52
have you tried putting the col classes on the anchor and making the anchor display block? (that way you don't need the div) — Pete, Jan 08 '19 at 12:01

Mobasshir Bhuiya · Answer 1 · 2019-01-08T12:27:27.597

$(".item").click(function() {
 window.location = $(this).data("location");
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="item col-lg-4" data-location="floor0.html">
  <p> floor zero </p>
</div>

You can do similar like this to avoid this css conflict with anchor tag and also to make a div clickable and redirect to destination link. If you run this code you will find 404 error code as there is no file here. Thank you. If this helps you then please make it accepted.

score 0 · Answer 2 · answered Jan 08 '19 at 12:54

Your mark up needs to be updated as you have some closing div tags missing, not sure if this just the case in the code in your question. The markup should be:

<div class="container">
    <div class="row">
        <div class="item col-lg-4">
            <a href="floor0.html">
                <p> floor zero </p>
            </a>
        </div>
    </div>
</div>

You need to give the <a> a style property of display: block; like this:

.item a {
   display: block;
}

The anchor will now cover the whole div and work the way you expect it to. It's also a good idea to note; if using a framework like Bootstrap the order of divs is important to make sure the grid behaves as expected, it should always be:

container > row > col

score 0 · Answer 3 · answered Jan 09 '19 at 14:44

Managed to solve this issue by removing the div with the column classes and then adding the classes from the removed div to the anchor tag

<div class="container">
<div class="row">
<a class="item col-lg-4" href="#">


<p> floor zero </p>

 <br>
 <br>
 <br>
 <br>


</a>

score -1 · Answer 4 · answered Jan 08 '19 at 11:58

-1

Try reading this: Is putting a div inside an anchor ever correct?.

If your goal is to open a link when the div is clicked you can try putting an onClick=(window.location.href='link here') event on the div tag or use jQuery event in script $('div').click(function(){window.location.href='link here'});

answered Jan 08 '19 at 11:58

j.ian.le

207
4
16

2

you can pretty much put anything inside an anchor with html 5 - it stops people using javascript to do what an anchor already does – Pete Jan 08 '19 at 12:07
Another drawback to the `onClick` approach is that browsers will not show the same options as it gives with an anchor tag: the **right-click menu** will not have "Open link in new tab" or "Save link as..." features, and **keyboard shortcuts** like CTRL+[link click] won't work either. Mobile users won't be able to **click-n-hold to open** in a new tab. The HTML5 spec allows anchor wrapping precisely so clients can function as expected. – Phil Nicholas Jan 13 '21 at 18:25

When wrapping a DIV in an anchor tag the layout gets messed up?

4 Answers4