1

Look at your Gmail inbox. You have 3 main columns

  1. contains the Sender
  2. contains "THE_EMAIL_SUBJECT - THE_EMAIL_BODY"
  3. the date the email was sent on

I note that when you resize the window, the Gmail web client automatically resizes the displayed text in the second column. It basically just truncates the text so that it always can display the sent on date to the right, and the sender to the left. It is a pretty neat effect, and I would like to have that effect for myself. Does anyone know how to do this in HTML/CSS/JS?

Stephen Cagle
  • 14,124
  • 16
  • 55
  • 86

2 Answers2

3

This will have a receiver sender fixed the left side and your date hugging the right of your window. No JavaScript!

<html>
<head>
    <title>SO</title>
    <style>
        #content
        {
            margin-right: 10px;
            width: 100%;
        }

        #receiver, #sender, #subject, #date
        {
            padding-right: 5px;
        }

        #receiver
        {
            width: 50px;
        }

        #sender
        {
            width: 50px;
        }

        #subject
        {
            width: 100%;
            overflow: hidden;
        }

        #date
        {
            width: 50px;
        }
    </style>
</head>
<body>
    <table id="content">
        <tr>
            <td>
                <div id="receiver">
                    Receiver
                </div>
            </td>
            <td>
                <div id="sender">
                    Sender
                </div>
            </td>
            <td id="subject">
                <div style="height: 20px;">
                    This is my long subject that hides its self when the window is too narow.
                </div>
            </td>
            <td>
                <div id="date">
                    May 6
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

You may change the content width to what percentage you would like or auto and or set margins.

You may not that it works better than Google in the sense that if the subject is too long then it gets hidden also. I just mixed mine up and put sender there when it should be in the order of sender receiver subject emailContent Date but you get the point im sure.

Jonathan Czitkovics
  • 1,642
  • 11
  • 11
  • Argh, thank you for the answer. I wont lie though, I spend almost a hour getting it to work. It wasn't until I noticed that you had specified a additional style => 'style:"height: 20px;"' in the "subject" td's div that I was able to get it working properly. I am just going to highlight to anyone else reading this that you need to included that height property (my guess, because you need to bound the text in order that it know it's parents dimensions). Thanks again for your help Jonathan. – Stephen Cagle May 06 '10 at 20:17
0

This StackOverflow question is similar to yours.

To apply this solution to your problem, you could use a table, fix the width of the right-most column (the date) and set the two other columns to overflow.

Community
  • 1
  • 1
Trey Hunner
  • 10,975
  • 4
  • 55
  • 114