[HTML]오토리사이즈 float left DIV 줄바뀜 현상 질문입니다

이제 개발자(라기 보다는 그냥 단순 코더) 2년차인 초급입니다~

테이블을 만들다가 가로 세로 열을 고정시키고 데이터 부분이 움직이는 Table을 만들었는데요.

문제는 아래와 같습니다

<table>

<tr>

<td>

<table>

<tr>

<td>

<div> 좌측 헤더테이블 (고정열, 크기 고정)</div>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

<table>

<tr>

<td>

<div> 우측 헤더 테이블 (고정열, 화면크기에 맞춰 resize) </div>

</td>

</tr>

<tr>

<td>

<div> 우측 컨텐츠 (스크롤, 화면크기에 맞춰 resize) </div>

</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

모양은 이런식이구요

javascript로 window.addEventReceiver('resize', function ());

추가 해줬습니다.

다만 문제는 resize시에 화면이 한번에 대폭 줄어들 경우에 float가 left로 잡힌 div가 줄바뀜 현상이 일어납니다...

조금씩 화면을 줄일때는 이상이 없지만 한번에 화면 가로폭이 확 줄어들면 발생하더라구요.....

실행 화면은 아래와 같습니다.

주황색 테두리가 세로 스크롤시 고정, 파란 테두리가 가로 스크롤시 고정되는 열이에요.

화면 resize될때에 파란테두리는 크기가 고정이라 상관이 없는데 오른쪽 편은 Div의 width가 커졌다 작아졌다 하는데요...

갑자기 화면 크기를 작게 줄이면 아래같은 경우가 발생해요..

아래는 제가 만든 파일인데요...

리사이즈 될때 우측 헤더와 컨텐츠 열 길이도 어긋나네요... ㅠㅠ

도움 요청합니다 ㅠㅠ