Need css help to force elements on single line

Question

Given the following HTML...

<div class="tester">
    <div>a</div>
    <div>abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst </div>
    <div>c</div>
</div>

How would I change this css to make the 3 divs above appear in a single row? The middle div I wish to clip if it overflows its boundary.

.tester { width: 300px; overflow: auto; background-color: #c5c5c5; }
    .tester > div { float: left; overflow: hidden; }
        .tester > div:last-child { float: right; width: 50px; }

Fiddle

* UPDATE *

Clarification I want to keep the width at 300px, and the middle element should clip if it exceeds it's bounding box. The bounding box of the first element is determined by it's size. The bounding box of the last element is set at 50px. So the middle element should clip.

Answer 1

Use display inline, here's a little demo:

Demo

HTML:

<div class="tester">
    <div>a</div>
    <div>abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst
    <div>c</div>
</div>

CSS:

.tester div {
    display:inline;
}

And the result:

a abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst abcd efgh ijkl mnop qrst c

Answer 2

use the display property

display: inline-block;