How do I stop content from flowing into the right div

Question

I created a two column div, but when there is more text on the left div than the right div the line below it pushed up into the right div.

How do I not have the text flow into the right div?

http://jsfiddle.net/wAqrr/

<div id="wrapper-industry">
<div id="wrapper-form">
    <div id="form_row">
        <div class="form_cell1">
            <p>Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu. Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu.</p>
        </div>
        <div class="form_cell2">
            <img height="347" src="http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg" style="display:block; margin:0 auto;" width="385" /></div>
    </div>
</div>
<div class="industry-intro rtecenter">
    <p>This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column.</p>

        </div>
    </div>

Answer 1

You already have display:inline-block; working, and you want the text below the apple in the apply column ... so just move your HTML around, kill the float:left; and you're golden.

Here is an updated jsFiddle, with tweaks to HTML structure and CSS.

<div id="form_row">
        <div class="form_cell1">
            <p>Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu. Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu.</p>
        </div><div class="form_cell2">
            <img height="347" src="http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg" style="display:block; margin:0 auto;" width="385" />
        <div class="industry-intro rtecenter">
            <p>This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column.</p>
        </div>
    </div>
        </div>
    </div>
</div>

Notice I eliminated the whitespace between .form_cell1 and .form_cell2, which allows the display:inline-block; elements to not go over the 100% width.

Answer 2

You need to clear your float

<div style="clear: both"></div>

Fiddle here