# Anchor \<a\> tag breaks layout

**URL:** <https://forum.freecodecamp.org/t/anchor-a-tag-breaks-layout/411885>\
**Category:** General\
**Created:** [July 26, 2020, 5:07pm UTC](https://forum.freecodecamp.org/t/anchor-a-tag-breaks-layout/411885 "2020-07-26T17:07:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![luxray](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/luxray/32/134200_2.png) [@luxray](https://forum.freecodecamp.org/u/luxray)\
**Post date:** [July 26, 2020, 5:07pm UTC](https://forum.freecodecamp.org/t/anchor-a-tag-breaks-layout/411885/1 "2020-07-26T17:07:51Z")

</div>

Hi guys, this is what happens when I try to add a link to the website:

 ![goodLayout](https://global.discourse-cdn.com/freecodecamp/original/3X/5/d/5d6de120212ecd9c40f42433a62e4ee5091e2ca6.png) ![brokenLayout](https://global.discourse-cdn.com/freecodecamp/original/3X/2/d/2d12a97d47c2f7a57aa0a62ea2705c40eb6e7b51.png)  
Here is the code:

```auto
<div class="project-1">
            <div class="project-1-grid">
             <div class="thumbnail-1"><img id="hex-code-img" src="imgs/hexCodeProject.png"></div>
              <div class="title-1"><h4>Color Randomizer</h4></div>
               <div class="description-1"><p>A simple webpage that randomly displays a different color and its Hex Code when a button is clicked.</p>
                <button type="button"><a href="https://backgroundcolorrandomizer.imfast.io/hexChangeBackgroundColor.html" target="_blank">GO!</a></button> 
            </div>
           </div>
           </div>

```

The parent div is wrapped up in another `<a>` tag to navigate smoothly clicking on the navbar. Also, I’ve tried to wrap the secont `<a>` tag around the button, but whatever I try it doesn’t seem to work.

Thank you for your help

---

<div class="post-metadata">

**Author:** ![Soupedenuit](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/soupedenuit/32/32478_2.png) [@Soupedenuit](https://forum.freecodecamp.org/u/Soupedenuit)\
**Post date:** [July 26, 2020, 5:32pm UTC](https://forum.freecodecamp.org/t/anchor-a-tag-breaks-layout/411885/2 "2020-07-26T17:32:36Z")

</div>

Generally you’d use either a button `<button>` or an anchor `<a>`. Not sure why you’d want to combine both.  
Here’s a helpful guide; [A Complete Guide to Links and Buttons](https://css-tricks.com/a-complete-guide-to-links-and-buttons/)

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [July 26, 2020, 5:38pm UTC](https://forum.freecodecamp.org/t/anchor-a-tag-breaks-layout/411885/3 "2020-07-26T17:38:08Z")

</div>

You can’t put an anchor inside a button, this is your problem. Some browsers will literally move the `a` outside the `button` in the rendered HTML (to counteract the fact that you’ve made an error). The logic _cannot_ work here, it _has_ to be either/or. An anchor and a button are both for clicking. So when you click the button, you can’t somehow tell the browser that you didn’t mean to click the button, that you wanted to click the clickable thing inside it. It doesn’t logically make any sense. If you want an anchor, use an anchor, if you want a button, use a button.

---

<div class="post-metadata">

**Author:** ![luxray](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/luxray/32/134200_2.png) [@luxray](https://forum.freecodecamp.org/u/luxray)\
**Post date:** [July 26, 2020, 6:59pm UTC](https://forum.freecodecamp.org/t/anchor-a-tag-breaks-layout/411885/4 "2020-07-26T18:59:11Z")

</div>

thanks for the input, but I deleted the button tag and only used the anchor tag but it doesn’t work anyway…

---

<div class="post-metadata">

**Author:** ![luxray](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/luxray/32/134200_2.png) [@luxray](https://forum.freecodecamp.org/u/luxray)\
**Post date:** [July 26, 2020, 7:02pm UTC](https://forum.freecodecamp.org/t/anchor-a-tag-breaks-layout/411885/5 "2020-07-26T19:02:44Z")

</div>

Thanks, but maybe there is also another problem because I did as you suggested, i deleted the so that there is only the anchor tag, but it still doesn’t work

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [July 26, 2020, 7:09pm UTC](https://forum.freecodecamp.org/t/anchor-a-tag-breaks-layout/411885/6 "2020-07-26T19:09:24Z")

</div>

> [@luxray](#):
>
> The parent div is wrapped up in another `<a>` tag to navigate smoothly clicking on the navbar. Also, I’ve tried to wrap the secont `<a>` tag around the button, but whatever I try it doesn’t seem to work.

So that `<a>` is wrapped, higher up the tree, in another `<a>`? Because if so, that’s going to cause the exact same issue as wrapping anchors in buttons, you can’t do this. Inspect the rendered HTML. Is the anchor you’ve added in the place you expect it to be?

---

<div class="post-metadata">

**Author:** ![luxray](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/luxray/32/134200_2.png) [@luxray](https://forum.freecodecamp.org/u/luxray)\
**Post date:** [July 26, 2020, 7:17pm UTC](https://forum.freecodecamp.org/t/anchor-a-tag-breaks-layout/411885/7 "2020-07-26T19:17:03Z")

</div>

Thank you, it works now 💪🏻

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:45pm UTC](https://forum.freecodecamp.org/t/anchor-a-tag-breaks-layout/411885/8 "2021-06-01T18:45:28Z")

</div>