CSS div dynamic width-Collection of common programming errors

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

.

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.

    
    
some text that is too long





.img {
    float: right;
}
.text {
    float: left;
    overflow: hidden;
}

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

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

   
       
        some long content
   
   
   img{
       float:right;
   }
   
   .container{
       overflow:hidden;
       zoom:1;
   }
   
   .flexi{
       white-space: nowrap;
       overflow:hidden;
       zoom:1;
   }
   

2. There are many solutions:

   One example:

   http://jsfiddle.net/SHYZR/

3. 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.

4. 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.

Originally posted 2013-11-09 18:41:04.