nested 100% height

[k0r54]

Hi,

I have searched around but have been unable to find anything relevant

My HTML code is below

<a href='linkurl'><div class="CLIndent">&nbsp;</div>Link</a>


What i need is the CLIndent height to be the same as the anchor. The anchor height will grow if the text is wider than what I set it too.

I have had to make the URL like this and put the div inside the anchor because the way my php app is running.


#catmenu1_container a {
position:relative;
float:left;
outline:none;
padding:3px 0 3px 15px;
background:#fee29f;
width:135px;
border-bottom:1px solid #FFF;
line-height:13px;
}

#catmenu1_menuitems a div.CLIndent {
position:relative;
float:left;
margin:-3px 15px -3px -15px;
width:15px;
background:#FFF;
border-right:1px solid #F93;
}


Any ideas?

Thanks
k0r54
[/CODE]

[Declan1991]

It's invalid HTML. While not catastrophic, it is a very bad start to use invalid HTML.

Try setting the height of the div to be 100%.

One more point, for efficiency, make your selectors as short as possible. So#catmenu1_menuitems .CLIndentThat is preferable to what you have if it still matches the same elements. If not, make it just as complicated as it needs to be to work, and no more. #id is faster than tag#id (and since ids are unique the first should always be used), as is .class compared to tag.class, unless it is necessary to distinguish.

[Four Staples]

In HTML, DIV is a block element and A is an inline element. Block elements can *never* be placed inside inline elements, it will cause your HTML to become invalid and unpredicted behaviour in browsers.

If you need to simulate the effect of a DIV inside of an anchor, use a SPAN (inline element) with style display: block; or just apply display: block; to the A itself. Doing so will allow you to treat it like a DIV and apply padding/widths/heights to it.

I suggest you give this a read.... http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1