To have the divs positioned more precisely, you could use absolute positioning inside the container div#iconsHolder (which should be styled with position:relative). Since you are already setting widths, simply adjust the left position of each div accordingly and apply CSS rules for top:0 and bottom:0.

Your current approach may be causing confusion and difficulty in CSS control. Consider converting it to a table for better results.

<table id="content" cellspacing="0">
<tr id="row">
<div id="iconsHolder">

    <td id="info">
        <div id="info_content">
            <p><?php echo img('images/man.png'); ?></p>
            <h2>Some guy over here</h2>
            <p class="light justify">It doesn't matter what is being said at the moment. Nothing is said here.</p>
        </div>
    </td>

    <td id="comp">
        <div id="comp_content">
            <p><?php echo img('images/computer.png'); ?></p>
            <h2>Computer Development</h2>
            <p class="light justify">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        </div>
    </td>

    <td id="story">
        <div id="story_content">
            <p><?php echo img('images/library.png'); ?></p>
            <h2>Story telling</h2>
            <p class="light justify">This is another short story.</p>
        </div>
    </td>
</div>
</tr>
    <tr id="bottom">
<td id="details" colspan="3">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</td>
    </tr>
</table>

Don't forget to remove float:left; from line 8 of your CSS and add the following code at the end.

tr#row td {
    width: 30%;
    background-color: #DDD;
    vertical-align: top;
}

An easy solution is to set the container div iconsholder as the background using the following CSS code:

#iconsHolder { background-color: #DDD; float:left;}

Simply add this to your CSS file and it should be compatible with all web browsers.

To achieve the desired background color for the container, ensure that it also expands to fit its children.

One approach is to apply float:left to the container as suggested in Sarah's solution. Alternatively, you can insert an empty "clear" div after the container if floating is not feasible. Though less ideal from a semantic standpoint, it serves as another workaround when float is not preferred.

Explore the code snippet on JsFiddle: http://jsfiddle.net/pQjNA/9/

Is it possible to achieve this using only HTML and CSS, or is JavaScript necessary?

It can actually be done with just CSS by utilizing the display: table-cell property. However, this method lacks support for IE7 and below.

A solution that combines both CSS and jQuery can be used to cater to a wider range of browsers. While the jQuery implementation ensures consistency across all browsers, the pure CSS approach provides a cleaner solution for most users, with only IE7 and earlier versions requiring jQuery for enhancement.

If opting for the jQuery solution for all browsers, the table-cell and table-row display properties can be omitted, and the !ie7 hack from the float property needs to be removed. Additionally, to ensure cross-browser compatibility, add overflow: hidden to the #iconsHolder div, and retain zoom: 1; for IE6 support.

CSS:

#content {
    width: 60em;
    margin: 0px auto;
}

#iconsHolder { 
    display: table-row; /* Supported in modern browsers.*/
    zoom: 1; /* Used for containing floats in IE.*/
}

...

HTML:

<div id="content">
 <div id="iconsHolder">
  <div id="info">
    ...
</code></pre>

<p><strong>jQuery:</strong></p>

<pre><code><!--[if lte IE 7]>
<script type="text/javascript">
$(document).ready(function() {

    var divHeight = $("#iconsHolder").outerHeight();          
    $("#iconsHolder > div").css("height", divHeight);

});
</script>
<![endif]-->

Added: JSfiddle

Note: The JSFiddle example does not include the jQuery code within a conditional comment.

• ^{I apologize if you were looking for a pure javascript solution. Feel free to ask for an alternative answer that includes pure JS implementation!}

It has been pointed out that using a faux background for the #iconHolder is causing issues with highlighting each column on mouseover.

Here's a suggestion to address this problem:

1) Create individual faux columns positioned absolutely at the same location as the original columns

Utilize the z-index property to ensure the content displays correctly

The HTML structure:

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>

<div id="faux1"></div>
<div id="faux2"></div>
<div id="faux3"></div>

The accompanying CSS:

#iconHolder {
    position: relative;
}

#col1, #col2, #col3 {
    position: relative
    z-index: 100;
}

#faux1, #faux2, #faux3 {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #DDD /* apply background only to faux columns */
    z-index: 50;
}

#faux2 {
    left: 20em;
}

#faux3 {
    left: 40em;
}

2) Assign your onmouseover/onclick events to both the faux column and the real column

function highlight() {
     faux.style.backgroundColor = "yellow"
}

function whatever() {
    //your code here
}

column.onmousover = highlight
faux.onmouseover = highlight
column.onclick = whatever
faux.onclick = whatever

If additional details are needed regarding the javascript aspect, feel free to inquire. Please note that the jQuery equivalent is beyond my current knowledge.

Although somewhat unconventional, this method effectively solves the issue without requiring complex calculations for height. Hopefully, this solution proves helpful!

Currently, your columns are stretching as far as the text allows them to. If I understand your question correctly, you want the background color/image of the columns to extend beyond the actual content. In order to achieve this, you need to create faux columns since the data within the columns does not fill the entire height.

One approach would be to apply a repeating background image to an element that spans the full height of your layout. This element could act as a wrapper surrounding your columns. For example, you could use a thin image divided into three color sections (each corresponding to a specific column) for the info, comp, and story divisions. This image would be 60em wide and repeat vertically like so:

#content 
{
background: #ccc url(fake-columns.gif) repeat-y left top;
}

In this code snippet, we assume that the image is located in the same folder as the CSS file (although it's not recommended; using 'images/fake-columns.gif' would be better to ensure proper referencing from the image directory). By setting the background property to repeat-y, the small image will repeat downwards to cover the entire height of the content div. The 'left top' values specify that the tiling should start from the top left corner, which is typically desirable. It seems that the pound symbol before 'content' got removed in my example CSS above.