Banner
Ukázka jednoduchého responzivního webu - tato stránka se na mobilních zařízeních s rozlišením do 1024px zobrazí automaticky bez sloupců, s horizontálním menu a vertikálně rozbalovacím hamburgerem (možné otestovat např. pomocí CTRL+kolečko na myši).

Výstupem na tiskárně je pak pouze obsah pravého sloupce (viz náhled tisku v prohlížeči).

Detaily ve zdrojovém kódu.


:: 3 sloupce - varianta 1 (float:left u všech sloupců)
:: 3 sloupce - varianta 2 (float:left a float:right u bočních sloupců)
:: 4 sloupce
:: Flexbox (nejaktuálnější HTML5/CSS3 varianta)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec dui. Integer tortor wisi, adipiscing id, lacinia in, dapibus ut, leo. Suspendisse rhoncus sapien et est aliquam vulputate. Nam non nibh. Praesent posuere tortor at risus. Nam facilisis elementum elit. Quisque condimentum congue quam. Fusce fringilla malesuada lectus. Nam tristique, mauris eget faucibus ullamcorper, neque tellus elementum metus, sit amet iaculis pede leo eget diam. Proin malesuada, magna vel vehicula pretium, tortor ipsum ultricies augue, sit amet ultrices wisi ipsum non nulla. Fusce blandit, velit et lacinia auctor, purus magna condimentum ligula, a facilisis mi mi nec est. Aenean eu augue sit amet velit suscipit vulputate. Ut augue quam, tempus tristique, vulputate in, vehicula ac, odio. Quisque vulputate diam a dolor. Maecenas molestie justo eu sapien. Donec pede metus, pulvinar ac, nonummy vitae, ultricies a, urna. Nunc porta. Vestibulum augue. Aenean mattis sapien non sem. Nullam justo est, aliquam in, facilisis eget, mattis id, mi. Mauris ac lorem facilisis urna convallis consectetuer. Vivamus id ipsum quis odio aliquet adipiscing. Vestibulum mattis est accumsan quam. Suspendisse at ligula sed ante faucibus bibendum. Vivamus scelerisque, pede ac mattis sagittis, justo nisl feugiat libero, ut adipiscing ligula lorem a tellus. Fusce magna pede, tempor nec, placerat vel, interdum et, leo. Integer odio. Sed luctus. Quisque nec ligula eu mauris ornare placerat. Mauris mi sem, lacinia vel, vehicula ut, porta ac, metus. Proin sollicitudin laoreet augue.
Nunc a lacus. Phasellus cursus, mi ac commodo ultricies, velit magna pellentesque lorem, et auctor diam nibh ac est. Phasellus mattis egestas risus. Sed dolor felis, molestie ut, lobortis dictum, posuere ac, orci. Ut a libero in leo sagittis dignissim. In hac habitasse platea dictumst. Sed tempor lectus ac mauris. Aenean turpis erat, ultricies sed, sollicitudin eu, porttitor dictum, mauris. Praesent quam lacus, malesuada tempor, blandit vitae, condimentum sed, ante. Vestibulum id nulla quis nulla volutpat viverra. Morbi tincidunt. Cras neque lectus, tincidunt sed, imperdiet a, mollis vitae, orci. Curabitur semper, leo eu egestas euismod, ante arcu malesuada diam, id commodo est lorem sollicitudin nibh. Praesent magna dolor, pellentesque vel, facilisis vel, aliquet eu, neque. Ut quis dui vitae justo sagittis egestas. Pellentesque metus leo, placerat non, hendrerit a, tristique quis, turpis. Cras neque lectus, tincidunt sed, imperdiet a, mollis vitae, orci. Curabitur semper, leo eu egestas euismod, ante arcu malesuada diam, id commodo est lorem sollicitudin nibh. Praesent magna dolor, pellentesque vel, facilisis vel, aliquet eu, neque. Ut quis dui vitae justo sagittis egestas.