CSS div dynamic width

Question

I got a little problem with the div width. I show you an image of what I have

Example .

There is an outside div that has no specified width, it can be small or big.

On the right we got a image that floats on the right.

The text div contains a dynamic width that fills all the undefined width space. and inside a undefined width text.

What I want is that the overflow of the Text Div is hidden when the text width is more then the Text Div space.

The problem is how to specify a width to get the overflow on a dynamic width ? If I don't specify any width, the image will go under the text if it's too long.

I hope I was clear enough.

Thank you for your help.

Edit:

Here is a bit of code to be more clear.

<div class="outside">
    <img src="img.jpg" class="img"/>
    <div class="text"><p>some text that is too long</p></div>
</div>

<style>
.img {
    float: right;
}
.text {
    float: left;
    overflow: hidden;
}
</style>

The problem is that .text doesn't have any specific width, so the overflow doesn't work

wait, hidden in what way? hidden with the width? or is there a height for the text div? — Joseph
– Joseph, Commented Feb 27, 2012 at 5:27
so it means only the height of the text div will adjust so that it will not overlap the images? — Bert
– Bert, Commented Feb 27, 2012 at 5:28
I edited, no the height must stay the same, it's the width that need to be cut. — user1040899
– user1040899, Commented Feb 27, 2012 at 5:41

Joseph · Accepted Answer · 2012-02-27 05:25:06Z

1

DEMO HERE

so let me get this straight:

you want the text to be clipped when they overflow
however, you want to set limits using the div where it's contained (which is dynamic)

try this

<div class="container">
    <img src="myimage.jpg" />
    <div class="flexi"> some long content</div>
</div>

img{
    float:right;
}

.container{
    overflow:hidden;
    zoom:1;
}

.flexi{
    white-space: nowrap;
    overflow:hidden;
    zoom:1;
}

answered Feb 27, 2012 at 5:25

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1040899 Over a year ago

I'll try this, jsfiddle.net seems to not work for the moment, I'll check later.

user1040899 Over a year ago

Ah no, it's not exactly what I need, it must be flexi that is overflow:hidden; I'm going to insert some code

Joseph Over a year ago

flexi HAS overflow hidden. look again. container needs overflow hidden only to contain the float.

user1040899 Over a year ago

Yes but doesn't seem to work... like jsfiddle doesn't work for me, I show you the result. resources.darizi.com/en/home you will see on the wedding gown part. I know it's not good to give a link but here I don't really understand :-(

Joseph Over a year ago

so you want the rating in line with the name am i right? remove float:left from .names div and add overflow:hidden to the containing <li>. and remove the clearing div.

|

Johannes Staehlin · Accepted Answer · 2012-02-27 05:25:03Z

0

There are many solutions:

One example:

http://jsfiddle.net/SHYZR/

answered Feb 27, 2012 at 5:25

Johannes Staehlin

3,7307 gold badges38 silver badges50 bronze badges

Comments

Ved · Accepted Answer · 2012-02-27 05:27:31Z

0

As per my understanding, you want that as and when your DIV is filled out by some text, its width should be increased respectively. try out this :

div
{
width:150px;
height:150px;
overflow:hidden;
}

Using this, your overflowed text which goes beyond 150px will not be displayed.

answered Feb 27, 2012 at 5:27

Ved

8,8177 gold badges38 silver badges69 bronze badges

Comments

Husain Basrawala · Accepted Answer · 2012-02-27 05:59:07Z

0

You can fix the width of Text div to occupy a percentage of outer div and leave the remaining space for the image depending on your image size.

Check here

edited to put the correct link.

edited Feb 27, 2012 at 5:59

answered Feb 27, 2012 at 5:32

Husain Basrawala

1,75115 silver badges22 bronze badges

2 Comments

user1040899 Over a year ago

The problem is that the % is not really reliable... jsfiddle.net works for you ?

Husain Basrawala Over a year ago

Why do you think its not reliable? In what scenario?

Collectives™ on Stack Overflow

CSS div dynamic width

4 Answers 4

6 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related