Skip to content

Instantly share code, notes, and snippets.

@claudiosanches
Created May 26, 2012 15:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save claudiosanches/2794317 to your computer and use it in GitHub Desktop.
Save claudiosanches/2794317 to your computer and use it in GitHub Desktop.
Tudo sobre Layout Responsivo #02: Diferenças entre Layout Responsivo e Fluido
<!DOCTYPE html>
<html dir="ltr" lang="pt-BR">
<head>
<title>Layout Fluido Hibrido - IE Hack</title>
<meta charset="UTF-8" />
<!-- CSS -->
<style>
* {margin:0;padding:0}
.clear {clear:both;}
#wrap {max-width:960px;min-width:600px;margin:0 auto;}
#resize {position:fixed;bottom:0;right:0;width:100px;height:100px;background:url(../images/resize-button.png) no-repeat;}
#left-sidebar {width:20%;background:aquamarine;float:left;}
#content {width:50%;margin:0 5%;background:burlywood;float:left;}
#right-sidebar {width:20%;background:darkseagreen;float:left;}
</style>
<!-- CSS para navegadores Internet Explorer 7 ou anteriores -->
<!--[if lte IE 7]>
<style type="text/css">
#wrap {width:960px;}
</style>
<!-- <![endif]-->
</head>
<body>
<div id="wrap">
<div id="left-sidebar">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div id="right-sidebar">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div class="clear"></div>
<div id="resize"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html dir="ltr" lang="pt-BR">
<head>
<title>Layout Fluido Hibrido</title>
<meta charset="UTF-8" />
<!-- CSS -->
<style>
* {margin:0;padding:0}
.clear {clear:both;}
#wrap {max-width:960px;min-width:700px;margin:0 auto;}
#resize {position:fixed;bottom:0;right:0;width:100px;height:100px;background:url(../images/resize-button.png) no-repeat;}
#left-sidebar {width:20%;background:aquamarine;float:left;}
#content {width:50%;margin:0 5%;background:burlywood;float:left;}
#right-sidebar {width:20%;background:darkseagreen;float:left;}
</style>
</head>
<body>
<div id="wrap">
<div id="left-sidebar">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div id="right-sidebar">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div class="clear"></div>
<div id="resize"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html dir="ltr" lang="pt-BR">
<head>
<title>Layout Fluido</title>
<meta charset="UTF-8" />
<!-- CSS -->
<style>
* {margin:0;padding:0}
.clear {clear:both;}
#resize {position:fixed;bottom:0;right:0;width:100px;height:100px;background:url(../images/resize-button.png) no-repeat;}
#left-sidebar {width:20%;background:aquamarine;float:left;}
#content {width:50%;margin:0 5%;background:burlywood;float:left;}
#right-sidebar {width:20%;background:darkseagreen;float:left;}
</style>
</head>
<body>
<div id="wrap">
<div id="left-sidebar">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div id="right-sidebar">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div class="clear"></div>
<div id="resize"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html dir="ltr" lang="pt-BR">
<head>
<title>Layout Responsivo</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<!-- CSS -->
<style>
/* CSS padrão, para monitores com 1024 de largura ou mais */
* {margin:0;padding:0}
.clear {clear:both;}
#resize {position:fixed;bottom:0;right:0;width:100px;height:100px;background:url(../images/resize-button.png) no-repeat;}
#wrap {width:960px;margin:0 auto;}
#left-sidebar {width:20%;background:aquamarine;float:left;}
#content {width:50%;margin:0 5%;background:burlywood;float:left;}
#right-sidebar {width:20%;background:darkseagreen;float:left;}
/* CSS para monitores com menos de 900px de largura */
@media screen and (max-width: 900px) {
#wrap {width:100%;}
#left-sidebar,#content,#right-sidebar {width:100%;float:none;margin:0;}
}
/* CSS para monitores com menos de 900px de largura */
@media screen and (max-width: 400px) {
#left-sidebar {display:none;}
}
</style>
</head>
<body>
<div id="wrap">
<div id="left-sidebar">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div id="right-sidebar">
<p>Lorem ipsum dolor sit amet, no vis quot meis laudem, aeterno omittantur in usu. Id mei appetere intellegat, vel suscipit mandamus te. Paulo recusabo liberavisse vis te, noluisse gubergren quo eu. His at laudem populo labore.<br />Sed solum malis nostrud at, ea habemus scriptorem per. Cum an nibh nonumes, natum lorem facilisi eu vis, agam natum blandit quo in. Id mea inani atomorum corrumpit, euismod voluptua signiferumque vim ut. Everti alterum reprehendunt id ius. Ei has animal splendide, tale modus ipsum et est. Eum invenire salutandi imperdiet no.<br />Tibique recteque scribentur est ad, essent fabellas vel id. At est enim nusquam maluisset, ut choro utroque maiorum mel. Mel ancillae eleifend eu, at tamquam commune accumsan usu. Cu minim vivendo fastidii usu, mea omnesque referrentur ex. Vel accusam accusata ne, cum voluptaria inciderint vituperatoribus ne.<br />At vis dicunt fastidii definitiones, nibh appareat volutpat nec ne. Mel ea dicunt habemus deserunt. Ad per vitae persius lucilius, no eam nibh nonumy mediocritatem, mentitum dignissim comprehensam nec ei. Affert populo expetendis eu vix, alterum facilisis signiferumque id eos. Ei vim recteque vulputate constituam.<br />Mei debitis imperdiet et, iriure voluptatibus vis et. Dolor noster ut nam, dicit quaestio vix ei. Oblique legendos et has, no dicit legere inimicus pro. An lorem eirmod eam. Ex homero sensibus antiopam eos, modus liber utinam no mel. Odio nihil suavitate in nec, deserunt assueverit pro id.</p>
</div>
<div class="clear"></div>
<div id="resize"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment