Banner
Ukázka čtyřsloupcového responzivního layoutu - 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 druhého sloupce (viz náhled tisku v prohlížeči).

Tento layout je řešen pomocí float: left u všech 4 sloupců, detaily ve zdrojovém kódu.


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 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.
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. 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.