Word-wrap: break-word breaks to wrong div size

Question

I am trying to align text next to an image. I want to account for long strings with no spaces.

My css is as follows

.new_item {
width: 100%; 
float: left;
border-bottom: 1px solid #990000; 
margin: 0 auto;
}

.image_container {
padding: 2px 2px;
height: auto;
float: left;
width: 300px;
}

.itemdescription {
word-wrap: break-word;
display: inline;

}

The text description containing a single long string is still being forced below the image_container because (I think) "word-wrap: break-word" is breaking the word to the width of the container .

How can I force the description div to stay next to the image div? The container div's width is 60% and the image will always be 300px. How can I size the div to the remanding size of the 60%? I have tried using inline-block and floating the respective divs to the left and right.

EDIT: Also includes CSS for container div above.

<div class="item_list">
                    <div class="new_item">
                    <div class="name">
                        <h2>Clock</h2><h4>$132</h4>
                    </div>
                    <div class="item_info"> 
                        <div class="image_container"><img src="images/image001.jpg" class="image"></div>
                        <div class="itemdescription">This       early 1800's winding design uses a leaf-spring click on the spokes of the wheel, to hold the weight that runs the clock. The power of the weight is transferred to the click.

Eventually, the shock of winding caused one of the original clicks to fail at a weak    point. Following the original maker's concept, a stronger replacement was made and installed.

The completed repair, ready to install - and good for another century of use. $132 </div>
                    </div>  
                    </div>
<div class="new_item">
                    <div class="name">
                        <h2>Litte</h2><h4>$832.2</h4>
                    </div>
                    <div class="item_info"> 
                        <div class="image_container"><img      src="images/HDR1.jpg" class="image"></div>
                        <div         class="itemdescription">LittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebi   rdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebird $832.2 </div>
                    </div>  
                    </div>      </div>

Answer 1

You made your image_container floating, but your itemdescription is not ; that means that the itemdescription will follow the "normal" page flow, so when the space to the left is free it will use it. To achieve what you want (I think), you should put each block floating and assign them sizes, for example :

.image_container {
    padding: 2px 2px;
    height: auto;
    float: left;
    width: 300px;
}

.itemdescription {
    display: block;
    float: left;
    overflow: hidden;
    width: 400px;
    word-wrap: break-word;
}

Don't forget to set a size to parent's div too, to make it work greate ; and read a bit about CSS floats theory

Answer 2

setting the .itemdescription to position:absolute and a left:320; (assuming you want some space between the image and text) solves the problem:

.itemdescription {
    word-wrap: break-word;
    display: inline;
    float:left;
    position:absolute;
    left:320px;
}