Question

I want to construct a timeline that has horizontal scrolling.

I have a wrapper DIV, inside it has months. Each month is a DIV inline-block. This works:

<div class="wrap">
    <div class="month">Jan 2013</div>
    <div class="month">Feb 2013</div>
    ...
</div>

This almost works, but because my clients site uses tables for layout the scroll bars don’t work. This fails:

<table><tr><td>

<div class="wrap">
    <div class="month">Jan 2013</div>
    <div class="month">Feb 2013</div>
    ...
</div>

</td></tr></table>

Here is a jsfiddle to show what I mean: http://jsfiddle.net/fhL9u/2/

NOTE: The top timeline example works as you resize the browser. It is 100% width of the page (or containing element.)

How do i make the second timeline overflow correctly? It must take up the remaining width of the screen (no with: 100px hacks), and if possible only show scroll bars when the months overflow.

This is an internal application so I can tell people to use Firefox or Chrome if I need to. This means I can use advanced CSS3 stuff or browser specific ( -webkit or -moz ) stuff. I’d prefer that it was IE8 compatable (just for my own curiosity)

Answer 1

If you can fix the width of that text (in pixels or percents) use this solution:

table {
    table-layout: fixed;
    width: 100%;
}

td:first-child {
    width: 100px;    /* or width: 15%; */
}

Note that you can use a different selector for the text (like a class)