Floating stops on resize due to horizontal overflow - html

Question

I have a fixed-width DIV that floats left, with the main content just beside it. When I resize the window, instead of a horizontal scrollbar I see the main DIV jumping downward below the floating DIV, i.e. the "floating" effect disappears.
A demo is available here:
http://jsfiddle.net/rustamabd/Xygn2/
How do I tell the browser that I always want to see both DIVs side-by-size, but without having to set min-width on the main DIV (I want the tables in the main div to squeeze as much as possible before the scrollbar appears).

Answer 1

Is it necessary to have two elements with class "main"? By changing the class name of your text div to "mainBody" I was able to get what you want with this...
.main-left {
float:left;
}
.left-block-1 {
width: 160px;
height: 400px;
background-color: grey;
}
.mainBody {
left:175px;
width:400px;
position:absolute;
}
.body{
overflow:auto;
}
So the html from the edited fiddle is...
<div class="main">
<div class="main-left">
<div class="left-block-1"></div>
</div>
<div class="mainBody">
Block-1
<br>
QWERTYUIOPASDFGHJKLZXCVBNMQWER
<table>
<tr><td>A B C</td><td>A B C D E F G H I K L M O P Q R S T U V W X Y Z</td></tr>
<tr><td>A B C</td><td>A B C D E F G H I K L M O P Q R S T U V W X Y Z</td></tr>
<tr><td>A B C</td><td>A B C D E F G H I K L M O P Q R S T U V W X Y Z</td></tr>
</table>
</div>
</div>

Answer 2

If you want to make the layout responsive, you must use percentage unit. And use word-wrap:break-word; to make the text go to the next line
Live demo
Otherwise, you need to use overflow:hidden; but this will truncate the word when it needs more space
.main{
overflow:hidden;
}
Live demo