Question

I have a <ul> on my site with structure pretty much identical to this: http://jsfiddle.net/tRzPH/1/

The link is the portion with the blue border. What I am trying to get it to do is strech all the way to the green borders on the right and left, and to the orange borders on the top and bottom. But of course, maintaining the position of the actual text content.

I’m not sure how to go about doing this, especially because anchors are not supposed to be parent elements of list-items.

Any advice?

Answer 1

If I understand correctly this is what you’re trying to accomplish, right? You’ll need a bit of jQuery http://jsfiddle.net/elclanrs/tJ3kv/

html:

<ul>
    <li><a href="#">
            <h2>item1</h2>
            <p>Lorem Ipsum Dolor Sit Amet</p>
        </a></li>
    <li><a href="#">
            <h2>item2</h2>
            <p>Lorem Ipsum Dolor Sit Amet</p>
        </a></li>
    <li><a href="#">
            <h2>item3</h2>
            <p>Lorem Ipsum Dolor Sit Amet</p>
        </a></li>
</ul>

css:

body { margin: 50px; }
ul {
    border: 1px solid orange;
    overflow: hidden;
    display: inline-block;
}

h2 {
    font-size: 24px;
    font-weight: bold;
}

li {
    float: left;
    width: 150px;
    border-right: 1px solid green;
}
li:last-child { border: 0; }
a {
    display: block;
    border: 1px solid blue;
    margin: 4px;
    padding: 1em;
    color: black;
    text-decoration: none;
}

jQ:

var getMaxHeight = function ($elms) {
    var maxheight = 0;
    $elms.each(function () {
        if ($(this).height() > maxheight) {
            maxheight = $(this).height();
        }
    });
    return maxheight;
};

var $elms = $('ul li a');
$elms.height(getMaxHeight($elms));