Исчезание блока в зависимости от размера окна

Всем привет!

Я уже голову сломал напрочь, целую неделю бьюсь и немогу сделать. Суть в следующем - у меня дизайн сайта изначально нарисован размером больше 1024 px, и в нем емеется 4 экспресс-блока, которые при размерах окна браузера или экрана не влазиют в одну строку и последний блок переносится на следующую строку. Как мне сделать, чтобы последний блок исчезал при размерах окна браузера в 1024 px и менее?

Пробовал и html и css и java. С помощью html, это понятно, не решить,с помощью css самый лучший и наверное единственный способ - это @media, но он не поддерживается IE младше 9 версии, а с java я не дружу, и соответственно все способы, которые я нашел в интернете у меня почему то не работают. Поэтому решил обратится на прямую к гуру.

Очень надеюсь на вашу помощь, заранее спасибо за уделенное внимение!!!

Ниже код верстки страницы:

Код (Text):

1. <div class="div22">
2. <span class="span5">.02</span> <a class="a4" rel="nofollow" href="/kak_kupit/">Как купить</a>
3. <br />текст блока<br />
4. <img src="/images/box_1.png" border="0" class="img5" />
5. <div class="div20"><a href="/kak_kupit/" class="a5">Далее</a></div>
6. </div>
7. <div class="div22">
8. <span class="span6">.03</span> <a class="a6" rel="nofollow" href="/oplata_i_dostavka/">Оплата</a>
9. <br />текст блока<br />
10. <img src="/images/box_2.png" border="0" class="img6" />
11. <div class="div21"><a href="/oplata_i_dostavka/" class="a5">Далее</a></div>
12. </div>
13. <div class="div22">
14. <span class="span7">.04</span> <a class="a7" rel="nofollow" href="/oplata_i_dostavka/">Доставка</a>
15. <br />текст блока<br />
16. <img src="/images/box_3.png" border="0" class="img7" />
17. <div class="div20"><a href="/oplata_i_dostavka/" class="a5">Далее</a></div>
18. </div>
19. <div class="div22">
20. <span class="span8">.05</span> <a class="a8" rel="nofollow" href="/garanty/">Гарантия</a>
21. <br />текст блока<br />
22. <img src="/images/box_4.png" border="0" class="img8" />
23. <div class="div20"><a href="/garanty/" class="a5">Далее</a></div>
24. </div>

Код (Text):

1. .div22 {
2.     background: url(/images/bg_box.jpg);
3.     width: 199px;
4.     height: 198px;
5.     border: 1px solid #d5f0fc;
6.     float: left;
7.     color: #4e5a5a;
8.     text-align: left;
9.     padding: 0px 5px 5px 5px;
10.     font-family: Century Gothic;
11.     font-size: 10px;
12.     margin-right: 19px;
13.     margin-bottom: 19px;
14. }

 

Сейчас пробую такую конструкцию:

Код (Text):

1. <script type="text/javascript">
2. <!--   
3. if (document.body.clientWidth <= 1024)   {document.getElementById("total").className="div22"; }
4.  
5. else if (document.body.clientWidth > 1024) {document.getElementById("total").className="div23"; }
6. //-->
7. </script>
8. <div id="total" class="dddd"></div>

Но ничего не происходит, помогите пожалуйста...

 

Тему можно закрывать, т.к. сам все-таки добил. Придумал 3 варианта, вот, например на jQuery с перезагрузкой стр:

Код (Text):

1. <script type="text/javascript">
2. {literal}
3. if ($("body").width() > 1024) {
4.     $("#total").hide();
5. }
6. else if ($("body").width() < 1024) {
7.     $("#total").show();
8. }
9. {/literal}
10. </script>
11.  
12. <div id="total" class="div22"></div>

Есть вариант еще на js без jQuery, все тоже самое, только немного длиннее код и третий вариант без перезагрузки страницы...