CODEWITHSUNDEEP
htmlcss
shoopdelang
shoopdelang

Reputation: 995

Resizing span to fill remaining width in a div

I currently have the following html structure

<div>
    <span id="a">
        Some text
    </span>
    <span id="c">
        <span id="resizable">
            Some text...
        </span>
        <span id="b">
            <img>
        </span>
    </span>
</div>

I want everything inside the div to be on one row (nothing should be wrapped) and the div should be completely inside a container. The contents of #a and #b should be shown in their entirety but the #resizable span can be resized to adjust for the remaining space. If the text cannot inside it cannot be completely displayed, then the overflow should be replaced with ellipsis.

I'm having a hard time getting everything to fit inside the container. If the text within #resizable is too long the entire div flows outside the container as I can't seem to get #resizable to resize properly.

Anyone have any ideas on how to achieve this?

EDIT

This is the css i have so far

#resizable {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.c {
    display: inline-block;
}

Upvotes: 2

Views: 11871

Answers (1)

mdelorey
mdelorey

Reputation: 136

Try this on for size (all CSS):

span {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}
#a {
    color: #F00;
    display: block;
    float: left;
    margin-right: 10px;
}
#c {
    display: block;
}
#b {
    display: block;
    float: right;
}

http://jsfiddle.net/markdelorey/XUBYt/

Upvotes: 4

Related Questions