Creating a div with a height that matches another div

Question

The title is a little confusing so let me explain. I'd like to create a content div area that has a small column on the left line that has line numbers, just as you'd see in some sort of IDE or text editor.

For an example, check out this site: http://codehearted.me/

You can see that it displays line numbers in that main content section, and its height matches whatever height the main content area is.

I've read some stuff on how to create multiple columns that set all the column heights to the tallest one, but that's not exactly what I need here. In order to implement the column with the line numbers, I've put in a bunch of numbers inside that number column div like so:

<div id="lineNumbers">
    <span>1</span>
    <span>2</span>
    <span>3</span>
        .
        .
        .
    <span>98</span>
    <span>99</span>
    <span>100</span>
</div>

This is how that example website seems to have implemented it, but when I try to do it, it lists all the numbers 1-100 and makes the content area way too tall. Instead of the content area matching the lineNumber's height, I'd like the lineNumber's height to match the real content's div height, with it cutting the rest of the numbers off at the bottom in the correct fashion.

Any ideas on how to achieve this would be greatly appreciated. Thanks, and let me know if you need any additional information.

Answer 1

Position it absolutely inside the div it's numbering.

The Style:

.numbered {
    position: relative;
}
.lineNumbers {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30px; /* or something */
    overflow: hidden;
}
.numberedContent {
    padding-left: 30px; /* match .lineNumbers' width */
}

The Markup:

<div class="numbered">
    <div class="lineNumbers">
        <span>1</span>
        ...
        <span>100</span>
    </div>
    <div class="numberedContent">
        Whatever is in the other box.
    </div>
</div>

The Demo:

It's a Fiddle.