Search code examples
jquerycssautosize

Auto resizing 2 divs with unknown width


I'm not entirely sure that this is possible, but what I'm hoping to accomplish is this.

I have two DIV's nested in a div, one that has an image to the right, and the other that has text to the left. What I'm hoping to do is have the DIV's resize to fit based on the size of the image.

For instance, if the DIV has an image that is 320w x 270h, and an overall space of 720px, then I would like to have the DIV that contains the text to re-size to 400px roughly. I already have the left box width set to auto to accommodate the different image sizes, but I don't know how to set the text box to size properly based off of that.

Let me know if you need anymore info.


Solution

  • Here is something that you want: http://jsfiddle.net/RnUES/

    HTML

    <div class="container">
    <div class="image"><img src="http://www.cs.cmu.edu/~chuck/lennapg/len_std.jpg" /></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lectus magna, interdum et faucibus a, sagittis ac diam. Quisque elementum malesuada ligula. Duis lectus quam, tempor dictum pulvinar id, posuere ac dolor. Etiam et ligula odio, non adipiscing lacus. Maecenas sit amet elit at leo congue tempus ut non ante. Vestibulum mauris diam, tincidunt eu viverra sit amet, malesuada et diam. Morbi ligula nulla, tristique laoreet imperdiet sed, posuere et velit. Donec mattis enim in leo feugiat mollis. Donec neque mi, posuere at dapibus vel, vestibulum vel mauris. Donec vestibulum leo eget nulla luctus sed hendrerit mauris tempus. Nunc augue erat, pharetra et mollis laoreet, tempus quis orci. Vestibulum lobortis sodales placerat. Integer imperdiet rhoncus nisl eu tristique. Nunc commodo, nisl a aliquet feugiat, tortor lacus porttitor libero, ut sollicitudin justo ligula nec justo.</div>
    
    </div>​
    

    CSS

    .container{width:720px; background:#ccc;}
    .image{float:left;}
    .text{overflow:hidden;}