View Full Version : div tags inside a tags

05-30-2005, 03:44 AM
I only have 1 error in the code of my web site. I'm usually not a huge stickler about gettting everything perfectly validated (especially if I feel like I have a good reason to go against the rules), but if I'm so close I may as well see if there is a fix. I have a <div> tag inside of an <a> tag because I want the whole <div> to link back to the home page. The validator doesn't like this because the <div> is a block element, and <a> is an inline element. Should I just change the <div> to a <span> or is there a better fix?

05-30-2005, 03:58 AM
Depends... what's in the div?

You could always make the link a block element (display: block), then give it width and height if it's a purely visual thing. Post your code, or better yet, a link to the site, and we can take a look at it.

05-30-2005, 09:19 AM
please post the code and we will try to figure out the problem.

Bill Posters
05-30-2005, 09:51 AM
e.g. (css)

a {
display: block;
height: 100%;

There's no need for a width attribute as, by default, a block element will expand to fill the available width of its parent/containing element.

05-30-2005, 10:36 AM
I'd love to hear the reason why you want an entire div inside a link... :rolleyes: What's it supposed to contain?

05-30-2005, 12:05 PM
You could use span with display block for it instead of div's.

05-30-2005, 10:20 PM
It's on the index page of designsbychris.com (http://www.designsbychris.com). Actually, every page of the site.

<a class="header" href="index.html?style=style">
<div id="header">
<span class="heading">
<span class="designsby">Designs by</span>
<span class="chris">Chris</span>

I made a style-switcher, and I'd like to replace the text "designsbyCHRIS" with an image in some of the styles, and this image should link back to the index page. It all works fine, but validators don't like than a <div> is inside of an <a>.

I'll probably just change it to a <span>. That seems to be the easiest thing to do. Thanks for the input.

05-30-2005, 11:48 PM
Then why not do what the others have been telling you, make an image and use a link on the image and have the link display block, that whole div will be clickable and you will be able to change the text rather easily using an image.

05-31-2005, 03:20 AM
The problem isn't with making it look and work right. It looks and works great. The problem is with validation. <div> tags do not go within <a> tags. The best solution it seems would be to use <span> tags instead, as mrruben5 said. Thanks for your help.