CODEWITHSUNDEEP
htmlcss
kolrie
kolrie

Reputation: 12732

Making a div use all the space available in a container

I have this container div with two elements:

<div id="container">
    <div id="right">Some, list, of, words, that, I, use</div>
    <div id="left">Person Name</div>
</div>​

And I want to make the #right div use up the space that is left by the #left div and hide the overflow.

Please also note that the #left div width is variable.

I came up with this css so far:

#container {
    width: 250px;
    border: 1px solid black;
    padding: 10px;
}

#left {
    white-space: nowrap;
    border: 1px dotted #ccc;
    display: inline;
}

#right {
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px dotted #ddd;
    white-space: nowrap;
    display: inline;
    float: right;
}

​ But the #right div still shows all text and end up on the following line, like displayed below:

Sample result

I played with making the #right div not float, adding width: 100% but nothing seems to work...

Does anyone know how I can make both be displayed on the same line, but making the #right div have its overflow hidden?

jsFiddle link: http://jsfiddle.net/y4xnx/13/

Edit: fixed my explanation of which divs should do what.

Upvotes: 3

Views: 763

Answers (2)

vivek
vivek

Reputation: 2004

I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/y4xnx/20/

HTML:

<div id="container">
     <div id="left">Person Name</div>
    <div id="right">Some, list, of, words, that, I, use</div>
</div>​

CSS:

#container {
    width: 250px;
    border: 1px solid black;
    padding: 10px;
    white-space:nowrap;
    overflow:hidden;
}

#left {
    border: 1px dotted #ccc;
    display: inline-block;
}

#right {
    display:inline-block;
    border: 1px dotted #ddd;
}
​

Upvotes: 1

grc
grc

Reputation: 23555

It would help to put #left before #right:

<div id="container">
    <div id="left">Person Name</div>
    <div id="right">Some, list, of, words, that, I, use</div>
</div>​

Then a few changes in the css should do what you're wanting:

#left {
    white-space: nowrap;
    border: 1px dotted #ccc;
    float: left;
    margin-right: 5px;
}

#right {
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px dotted #ddd;
    white-space: nowrap;
}

Example: http://jsfiddle.net/grc4/MvXuN/

Upvotes: 6

Related Questions