How to achieve same text height in different divs beside each other?

my problem is the following: my content consists of two divs beside each other - one wide one for the content and a small one to the left. In the content div there are different articles. Let's say one article is 50px down, the next one 350px and the l开发者_JAVA百科ast one 600px. I want to achieve that every time an article starts in the content div a small text is show in the left div on the very same height. So in this case I would like text at 50px down, 350 and 600px. But I don't want to do this statically. If the lengths of the articles are shifting I want these small texts to shift to the same height as well.

Now, I tried it with jQuerys height, but it doesn't seem to do the job. I am not an expert on jQuery though. Anyone who has an idea would be much appreciated!

Thanks!

Have you tried the jQuery equal heights plugin?

There is a demo on their website that will show you what it does.

Using the plugin the code becomes trivial:

$(document).ready(function() {
    $(".columns").equalHeights();
});

you can do something like this

Get the height of dynamic div

var contentHeight=$('#ContentDiv').height();

// set the height of another div

$('#leftDiv').css('height',contentHeight);

Here's what I use on any of my current websites..

function equalHeight(group) {
    var tallest = 0;
    group.each(function () {
        var thisHeight = $(this).height();
        if (thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

equalHeight($('div.equal'));

If you want the divs to be the same height then try http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks. It worked perfectly for me.

However from what I understand you want something like the following:

Article 1       fgsdgsgldsfdsfsdfsdfsdf
                fsdfdsfdsfsdfsdfsdfsdfd
                dsfdsfdsfdsfsdfdsfsdfdd

Article 2       fdsfsdfsdfsdfsdfsdfsdfs
                dsfdsfdsfdsfsdfdsfdsfds

Article 3       fdsfdsfdsfdsfdsfsdfsdfd
                dfdsfsdfsdfsdfsdfdsfsdf
                dfdsfsdfsdfdsfsdfdsfsdf
                dfdsfdsfdsfdsfdsfdsfdsf

If this is the case, use something like the following. I found it quite difficult to think of a solution to start with, but then it hit me straight between the eyes!

<div>
    <div style="float: left; width: 20%;"><div style="apply padding, margin etc here">Article 1</div></div>
    <div style="float: right; width: 80%;"><div style="apply padding, margin etc here">Article 1 body</div></div>
    <div style="clear: both"><!--This stretches the parent div to wrap the floating divs--></div>
</div>
<div>
    <div style="float: left; width: 20%;"><div style="apply padding, margin etc here">Article 2</div></div>
    <div style="float: right; width: 80%;"><div style="apply padding, margin etc here">Article 2 body</div></div>
    <div style="clear: both"><!--This stretches the parent div to wrap the floating divs--></div>
</div>
<div>
    <div style="float: left; width: 20%;"><div style="apply padding, margin etc here">Article 3</div></div>
    <div style="float: right; width: 80%;"><div style="apply padding, margin etc here">Article 3 body</div></div>
    <div style="clear: both"><!--This stretches the parent div to wrap the floating divs--></div>
</div>
<div>
    <div style="float: left; width: 20%;"><div style="apply padding, margin etc here">Article 4</div></div>
    <div style="float: right; width: 80%;"><div style="apply padding, margin etc here">Article 4 body</div></div>
    <div style="clear: both"><!--This stretches the parent div to wrap the floating divs--></div>
</div>

Edit: The reason you apply padding and margin etc to divs nested inside the floating divs is that it will otherwise shunt the right one down to the next row. i.e. if you apply padding to the left one then that will actually have width of 20% + padding, and the right one will have width of 80%. Obviously this adds up to 100% + padding and browsers do not like this. I had that problem a few weeks ago but adding another div to which I apply the padding / margin etc did the trick perfectly.

If you want borders then I think this has to be applied to the child divs too, but I can't think of an easy way to make the heading and body height equal, apart from using the website I put the link to above - but thats a lot of work.