Make inline justified div into link (display: block does not work)

Question

I used the following solution to create 3 divs next to each other: Fluid width with equally spaced DIVs

However, when I wrap each box inside an <a> tag with display:block the entire layout gets funky.

Is there a way around this? The fluidity (is that even a word?) is not really necessary, but preferable. The reason I used it this solution is because it keeps boxes neatly next to each other even in IE6/7 and for the sake of simplicity too.

Thanks in advance!

!`div`s should not be inside `a` tags! Instead of this assign a click event handler to your divs and set the cursor to `pointer` in your css, you'll have the same effect. — slash197, Mar 05 '13 at 11:33
hmm an on click event would be a solution yes. Is that the best solution? In other words, "industry standard"? — Nick, Mar 05 '13 at 11:38
HTML5 _does_ allow you to wrap block-level elements in `` tags, fyi. Although, that may not be what you're using. Please give a link to your example or create a jsfiddle, as we're having to make assumptions about what CSS changes you've made and they may be _wrong_ assumptions. — Andy Allcorn, Mar 05 '13 at 11:57

score 1 · Accepted Answer · answered Mar 05 '13 at 11:44

You cannot wrap a div with a - and if I am understanding you correctly this is where your problems start.

If you want to make your entire div clickable, place a link inside your div around some text/a title/whatever and use jQuery to action this link if you click ANYWHERE inside the div

$(".divClass").click(function () {
    window.location = $(this).find("a").attr("href");
});

Make inline justified div into link (display: block does not work)

1 Answers1