CODEWITHSUNDEEP
htmlcss
MeltingDog
MeltingDog

Reputation: 15404

Elements rendering outside of block 'a' tag

I have a series of <a> tags that are set to display:block.

These have a series of <divs> within them, eg:

<a href="#" class="sliderframe">
             <div class="container-caption">
                <div class="slider-caption">
                  <p>CAPTION</p>
                  <a href="#">SHOP ONLINE</a>    
                </div>
            </div>
 </a>

However, when the browser renders these the inner divs appear outside the A tag, eg:

<a href="#" class="sliderframe"></a>
    <div class="container-caption">
      <div class="slider-caption">
         <p>CAPTION</p>
         <a href="#">SHOP ONLINE</a>    
      </div>
    </div>

Would anyone know why this is happening?

The CSS:

.sliderframe
{
    display: block;
    width: 100%;
    height: 570px;
}

Upvotes: 0

Views: 295

Answers (1)

stwupton
stwupton

Reputation: 2235

Nesting an anchor tag within another anchor tag is illegal. Browsers will automatically correct this by moving the nested elements to the outside of the parent anchor tag.

Upvotes: 2

Related Questions