I have a set of <a> elements that are styled with display:block.
These contain various nested <divs>, for example:
<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 displays them, the inner divs end up outside of the A tag, like this:
<a href="#" class="sliderframe"></a>
<div class="container-caption">
<div class="slider-caption">
<p>CAPTION</p>
<a href="#">SHOP ONLINE</a>
</div>
</div>
Does anyone have an idea why this is occurring?
Here's the CSS code:
.sliderframe
{
display: block;
width: 100%;
height: 570px;
}