How to wrap anchor around divs?

Question

I am having problems with wrapping an anchor tag around 6 different divs and not sure why they are behaving in an obscure way. I have recreated the issue here.

The issue is that the anchor isnt clearing the divs and causing some issues when trying to style the anchor tag.

a {
  text-decoration: none;
}

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 25px solid transparent;
}

.categorypost {
  height: 200px;
  margin-bottom: 80px;
  width: 320px;
  display: inline-block;
  color: #FFF;
  font-family: "ff-tisa-web-pro", serif;
  font-size: 20px;
}

a.catpostlink {
  text-decoration: underline;
  font-size: 20px;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}

a.catpostlink:hover {
  color: #005e48;
  text-decoration: underline;
  font-size: 20px;
}

<div class="catwrapper">

  <div class="categorylist">


    <a href="businesses.php" title="SME Businesses for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg'); background-size: 100%;">

        <div style="float: left; background-color: #498d7b; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          <p style="line-height: 0px;">Businesses</p>
        </div>


        <div id="triangle-topright" style="float:right; border-top: 25px solid #498d7b;"></div>

      </div>
    </a>



    <a href="carehomes.php" title="Care homes for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg'); background-size: 100%;">

        <div style="float: left; background-color: #618ab8; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          Care homes
        </div>

        <div id="triangle-topright" style="float:right; border-top: 25px solid #618ab8;"></div>
      </div>
    </a>


    <a href="kennelscatteries.php" title="Kennels & Catteries for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">

        <div style="float: left; background-color: #fed670; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          Kennels & catteries
        </div>

        <div id="triangle-topright" style="float:right; border-top: 25px solid #fed670;"></div>
      </div>
    </a>


    <a href="daynurseries.php" title="Day nurseries for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">

        <div style="float: left; background-color: #fed670; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          Day nurseries
        </div>

        <div id="triangle-topright" style="float:right; border-top: 25px solid #fed670;"></div>
      </div>
    </a>



    <a href="postoffice.php" title="Post Offices for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">

        <div style="float: left; background-color: #aa232a; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          Post offices & shops
        </div>

        <div id="triangle-topright" style="float:right; border-top: 25px solid #aa232a;"></div>
      </div>
    </a>





    <a href="catering.php" title="Catering Businesses for sale">
      <div class="categorypost" style="background-image:url('http://dz54ediij1h8m.cloudfront.net/cms_media/images/events/a91fe217e45a700fc2dab0cc476f01c7.1394462553.jpg');background-size: 100%;">

        <div style="float: left; background-color: #0e2c67; padding: 20px 0 20px 0; margin-top: 160px; width: 100%;">
          Catering businesses
        </div>

        <div id="triangle-topright" style="float:right; border-top: 25px solid #0e2c67;"></div>
      </div>
    </a>

  </div>
</div>

What do you suggest I do to ensure the whole thing is click able? — user3520443, Apr 22 '14 at 13:20
HTML5 allows block level elements to be wrapped within anchor tags. — Billy Moat, Apr 22 '14 at 13:23
@j08691 I don't think it is in html5 but I may be wrong @user3520443 try making your elements `display:block` — Pete, Apr 22 '14 at 13:24
Is that what you want to do ? http://jsfiddle.net/853J7/ If you want the whole thing clickable, I don't understand why the a tag is inside the div. — Holt, Apr 22 '14 at 13:25
But will changing them to block level elements stop the divs being inline? — user3520443, Apr 22 '14 at 13:26
@Holt hover around that div and there is an invisible space where you click and will trigger the link - I literally want to wrap each div in an anchor without any white space — user3520443, Apr 22 '14 at 13:28
not if you've set the divs to be inline but i don't think I've understood your problem properly so my solution probably won't work. Your fiddle doesn't show any spaces — Pete, Apr 22 '14 at 13:29
@Pete - If you see this http://jsfiddle.net/SN48Z/ and each div needs to be clickable. But with no white space around them which is a clickable area for the link so I need to the anchor to hug around the whole div and also allow the divs to remain inline. — user3520443, Apr 22 '14 at 13:31
[Try this](http://jsfiddle.net/peteng/SN48Z/1/) - makes the wrapping anchor inline-block and moes the margin-bottom from the categorypost to the anchor — Pete, Apr 22 '14 at 13:34
@user3520443 Ok so it is what you want : http://jsfiddle.net/H79JU/ ? — Holt, Apr 22 '14 at 13:34
Almost pretty much that but that will not allow me to have the categories inline? so if you add 5 more of those they all stack up in a list I need them to be along side each other... — user3520443, Apr 22 '14 at 13:38
@user3520443 Add `display: inline-block` on the `a` tag instead of `display: block` (for my version). — Holt, Apr 22 '14 at 13:39
@Holt & Pete Thanks guys - All working now :) I have learned something new today! — user3520443, Apr 22 '14 at 13:47
@holt How would I get these to sit in the middle of as div so three in a row on two rows with no margin to the left and right of the outer ones? — user3520443, Apr 22 '14 at 14:03
@Holt Also having the strangest issue it will allow me to change the hover color of the font but if you ask it to underline the font it dosnt :S — user3520443, Apr 22 '14 at 14:07
@user3520443 If you want to have three in a row, you'll have to set the width manually to something like `30%`. To have some horizontal distribution, put everything in a div with `text-align: justify`. Also set the `background-size` to `100% 100%` so it will fit the `a` tag. Finally, to underline, just change go find the span inside tha a tag : `a.catpostlink:hover span { ... }`. See there : http://jsfiddle.net/WrRaY/ — Holt, Apr 22 '14 at 14:10
@holt I am struggling to understand how to center these items. — user3520443, Apr 22 '14 at 14:28
@holt I have been using your example but the problem with using justify as you can see the second line of the divs isnt aligned properly? — user3520443, Apr 24 '14 at 08:14
@user3520443 Yes, unfortunately the last line of a justified div is not justified, but you'll find lot of trick on google to correct that, like adding a `a.catpostlink:after {content: ""; display: inline-block; width: 100%;}` (See http://stackoverflow.com/questions/4771304/justify-the-last-line-of-a-div for example). — Holt, Apr 24 '14 at 08:25
@Holt I am still a little confused, would you be able to show me an example? — user3520443, Apr 24 '14 at 08:29
@user3520443 I made a mistake in my answer, it's `#wrapper:after`, not `a.catpostlink:after`. In fact the trick is to add a kind of "new line" with the `:after` css attribute to justify the last line. See here : http://jsfiddle.net/2dMNq/ — Holt, Apr 24 '14 at 08:32
@Holt In actual fact you have fixed it for me. I just removed all the code and put it back in bit by bit. — user3520443, Apr 24 '14 at 08:43
@Holt but because of the width being a percentage how do they remain a fixed width and drop down when the screen gets smaller? — user3520443, Apr 24 '14 at 08:45
@user3520443 If you want fixed width, use fixed width like `320px`. I used percentage because you said you wanted 3 in a row. — Holt, Apr 24 '14 at 08:50
They are required to be in a row but would changing them to a fixed with allow me to have them in a row? — user3520443, Apr 24 '14 at 08:51
@user3520443 If you put fixed width, depending on the screen width you will have either 1, 2, 3, etc. block in each row. I don't really understand what kind of display you want... Maybe you should open another topic because it is not related to your first question. — Holt, Apr 24 '14 at 08:55

How to wrap anchor around divs?

0 Answers0