CODEWITHSUNDEEP
htmlcss
John Livermore
John Livermore

Reputation: 31313

Need css help to force elements on single line

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.

Upvotes: 3

Views: 256

Answers (2)

Peter Rasmussen
Peter Rasmussen

Reputation: 16922

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

Upvotes: 3

Mike Gordo
Mike Gordo

Reputation: 121

use the display property

display: inline-block;

Upvotes: 2

Related Questions