Determine width based on percentage using only CSS

Question

I have three columns (divs floating left), each with a width of 30% plus 3% padding. Each column contains an image that is 100px wide. Next to each image, I want to put a title/description next to that, which will take up the rest of the space in that column.

I know you can't do math in CSS, so we couldn't just do something like width: 33% - 100px; (would be awesome if you could). I could determine it with JavaScript, but I'm trying to avoid using JS for this task, if possible. I would rather see if anyone can come up with a better design where I wouldn't have to do that.

See my example on this fiddle.

Here is my HTML:

<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="images/items/item1.jpg" />
    <div>
        <b>Item 1</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="images/items/item2.jpg" />
    <div>
        <b>Item 2</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item clearfix">
    <img src="images/items/item3.jpg" />
    <div>
        <b>Item 3</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>

And the relevant CSS:

.column3 {
    float: left;
    width: 30%;
    height: 100px;
    padding: 0 1.5%;
}

.column3 > div {
    float: left;
    margin-left: 15px;
}

.column3 > div > p {
    display: inline-block;
}

.item img {
    float: left;
    width: 100px;
    height: 100px;
}

So I need to figure out how to set the width of the inner div so that it will take up the rest of the space. I know I can do this with JS, but I would really prefer a CSS solution so that when the user resizes the page, it automatically adjusts that width (without having to call a JS resize event listener) and then all of my styling will be kept in one place, reducing the complexity.

None of this code is set in stone, so if you can suggest a better HTML/CSS structure, that would be a perfectly acceptable solution.

Answer 1

Are you looking for this?

Demo

CSS:

.column3 {
    float: left;
    width: 30%;
    height: 100px;
    position:relative;
    padding: 0 1.5%;
}
.column3 > div {
    display:inline-block;
    border: 1px solid #0ff;
    margin-left:100px;
    padding-left:-100px;
}
.column3 > div > p {
    display: inline-block;
}
.item img {
    width: 100px;
    height: 100px;
    position: absolute;
    top:0;
    left:0;
}
/* clearfix */
 .clearfix:before, .clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}
/* END clearfix */

HTML:

<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 1</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 2</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item clearfix">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 3</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>