Webast

Здравствуйте. Подскажите пожалуйста кто знает, как с помощью css реализовать следующее. У меня на сайте в шапке сделана такая конструкция: 1-я картинка, а справа от нее в столбик 3 слова. 2-я картинка, а справа от нее в столбик 3 слова. 3-я картинка, а справа от нее в столбик 3 слова. Все эти 3 картинки со словами выстроены в строчку, т.е. если разрешение экрана позволяет, то они располагаются на одном уровне. Если разрешение экрана меньше (например, на смартфоне), то слова в столбике могут располагаться ниже картинки, а не справа от нее. Хотя места справа вроде бы достаточно. Получается не очень красиво. Код HTML: <div id="header_image"><img src="/image-1.png" /></div> <div id="header_text">Текст в столбик 1 <p>Текст в столбик 2</p> <p>Текст в столбик 3</p> </div> <div id="header_image"><img src="/image-2.png" /></div> <div id="header_text">Текст в столбик 1 <p>Текст в столбик 2</p> <p>Текст в столбик 3</p> </div> <div id="header_image"><img src="/image-3.png" /></div> <div id="header_text">Текст в столбик 1 <p>Текст в столбик 2</p> <p>Текст в столбик 3</p> </div> Код CSS: div#header_image { float: left; padding: 20px 10px 0px 0px; display: inline; } div#header_text { float: left; padding: 20px 30px 0px 0px; display: inline; } Конечно, все три картинки со словами в столбик уместить на одном уровне в строчку не получится при определенном разрешении, да и не надо это. Главное чтобы каждая картинка с ее тремя словами в столбике всегда были на одном уровне в строчку. А вторая картинка с ее тремя словами в столбик ниже, 3-я ниже 2-й... Посоветуйте что можно в это случае сделать при помощи css? Может достаточно какие-нибудь стили прописать в приведенный код для div header_image и div header_text?