css - Prevent float element push other element -

my code this:

<div class="padding5"> <div id="div1" class="float_left wh50"></div> <div id="div2" class="float_left h50">long text goes right here, lorem ipsum dolor sit amet.long text goes right here, lorem ipsum dolor sit amet.long text goes right here, lorem ipsum dolor sit amet.long text goes right here, lorem ipsum dolor sit amet.</div>                         <div id="div3" class="float_right wh50"></div> <div id="div4" class="float_right wh50"></div>                                                                                                                           <div class="clear"></div>                                                  </div> 

and css this:

<style> .padding5{padding:5px;} .wh50{width:50px;height:50px;} .h50{height:50px;} .float_left{float:left;} .float_right{float:right;} </style> 

now if resize window (and make smaller) want content div id=2 break words new row not. keep pushing other elements behind.

remove height .wh50 class. or set min-height: 50px;. height declaration causing div3 , div4 appear they're not being cleared.

.padding5{padding:5px;} .wh50{width:50px;height:50px;} .h50{min-height:50px;} .float_left{float:left;} .float_right{float:right;}