How to make Google Reader / Gmail's list view

Question

I want to make a UI that's similar to Google Reader's list view:

http://dl.dropbox.com/u/2792776/screenshots/2011-12-24_1807.png

I.e.,

1. The star is of definite width / height and is fixed on the far-left
2. Then comes the subject and body preview. When the window is resized, this content gradually disappears in response to the narrower window
3. The date is of a definite width / height and is fixed to the far-right

The challenge is getting the behavior correct when the window is resized. The only thing that should change when the window is narrowed is that words from the right of the body preview should gradually disappear (and when there are no more, words from the title should disappear):

Answer 1

You can use absolute and relative CSS positioning to create a constraint system of sorts.

Given this HTML:

<ul>
    <li>
        <div class="left">Left content</div>
        <div class="center">Really long center content that will get truncated if you were to resize the window</div>
        <div class="right">Right content</div>
    </li>
</ul>

If the parent (the li) is relatively positioned, you can use absolute positioning on the children (the div elements), using left/right/width and top/bottom/height as desired. The following is an example:

ul li {
    position: relative;   /* Parent has relative positioning */
}

ul li div {
    position: absolute;   /* Children have absolute positioning */
}

ul li .left {
    left: 0;              /* The left div should be all the way to the left */
    width: 100px;         /* Static width of the left section */
}

ul li .right {
    right: 0;             /* The right div should be all the way to the right */
    width: 100px;         /* Static width of the right section */
}

ul li .center {
    left: 100px;          /* Static width of the left section */
    right: 100px;         /* Static width of the right section */
}

I've posted a live example of this at http://jsfiddle.net/69TVf/1/.