[Resolvido] Barra Lateral de Largura Fixa...

Bruno Augusto · Março 1, 2012

Não sei se me expressei bem pelo título. Eu acho que já vi algo assim, mas não tenho certeza.

Layout simples, duas colunas, com barra lateral à direita.

Tem como fixar, com px a largura dessa barra lateral e fazer com que à porção à direita dela, isto é, a porção principal, se estender por toda largura restante, que seria a largura da DIV pai subtraindo-se os, sei lá, 300px da barra lateral?

Algo assim:

#outer {
   margin: 0 auto;
   width: 90%;
}

#sidebar {
   float: right;
   width: 300px;
}

#content {

   /** Sem width */
}

<div id="outer">

   <div id="sidebar">Sidebar</div>

   <div id="content">Lorem ipsum dolor sit amet...</div>
</div>

Como é de se esperar a DIV #content se estende pelos 90% de #outer, porém ficando embaixo de #sidebar, que flutua à direita.

Dá pra fazer? Sem fixa ambas as larguras?

Thiago Moraes · Março 1, 2012

Se colocar a div content com float left e largura 100%, não resolve?

Bruno Augusto · Março 1, 2012

Infelizmente não.

Eu sei fazer layout 100% fluido, sabe, com ambas as larguras, da porção principal e da barra lateral medidas em porcentagem e ambas se complementando até atingirem 100% da largura da DIV pai. Ex: Conteúdo = 75% e Barra = 25%.

Mas o problema dessa abordagem é que em resoluções muito altas a barra lateral fica MUITO grande, por isso que eu queria saber se há tal possibilidade.

Marrabel · Março 1, 2012

Já tentou definir o min-width e o max-width em ".em" na div pai?

Dái da pra controlar até que tamanho ele vai, mesmo sendo em resolução grande. E o texto acompanha...

Testa ai e vê se da certo.

Espero ter ajudado.

William Bruno · Março 1, 2012

Dá uma olhada aqui @Bruno Augusto:

http://wbruno.com.br/2009/08/16/div-100-redimensionavel-com-coluna-fixa/

Bruno Augusto · Março 2, 2012

Certo, antes de experimentar sua solução, William, continuei procurando e até encontrei, implementei e funcionou, porém a forma me deixou meio ressabiado porque utilizava margin negativo em "medidas quebradas" (nem sempre múltiplo de 10).

A forma implementada foi essa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/2002994779-widget_css_bundle.css' />
<link type="text/css" rel="stylesheet" href="http://www.blogger.com/dyn-css/authorization.css?targetBlogID=5733190168009545958&zx=7f39bf78-34a6-4fb2-9dc2-7c35fd24e06e"/>
<style type="text/css">
#navbar-iframe { display:block }
</style>
<style id='page-skin-1' type='text/css'><!--

--></style>
<style type='text/css'>

* {
   margin: 0;
   padding: 0;
}

body {
   background: #131313 url(http://4.bp.blogspot.com/_ActSVcJ9YKs/TLZPwUJEM9I/AAAAAAAAA9A/coCU7FoK_e4/s000/background.png) left 175px repeat-x;
   color: #a59b8e;
   font: 75%;
   height: 100%;
   margin: 0;
   padding: 0;
}

a:link, a:visited {
   color: #DC9843;
   outline: none;
   text-decoration: none;
}

a:hover {
   color: #FFF;
   outline: none;
   text-decoration: none;
}

a img {
   border: none;
}

#outer-wrapper {
   float: left;
}

#header-wrapper {
   height: 138px;
   margin: 0 auto;
   overflow: hidden;
}

#navigation {
   background: url(http://4.bp.blogspot.com/_ActSVcJ9YKs/TLZP0jTMGaI/AAAAAAAAA90/eD197uVWPGU/s000/nav-background.png) left bottom repeat-x;
   color: #FFF;
   display: block;
   font-size: 12px;
   margin: 0 5% 10px 5%;
   padding-top: 12px;
   text-transform: uppercase;
}

   /**
    * Hiding Pages Title (after each Update, Blogger seems to reset it)
    */
   #navigation h2 {
       display: none;
       visibility: hidden;
   }

   #navigation ul {
       list-style: none;
   }

   #navigation li {
       display: inline;
       float: left;
       margin: 0 5px 5px 0;
       padding: 15px;
   }

   #navigation li.selected, #navigation li:hover {
       background: url(http://2.bp.blogspot.com/_ActSVcJ9YKs/TLZP08rWSLI/AAAAAAAAA94/QqjqP4mInOE/s000/nav-background-hover.png) left top repeat-x;
   }

   #navigation li a {
       color: #FFF;
       font-weight: bold;
   }

#content-wrapper {
   float: left;
   height: 100%;
   margin: 0 -350px 0 5%;
   min-width: 800px;
   width: 90%;
}

   #main-wrapper {
       background-color: #262626;
       border-right: 4px solid #1B1B1B;
       margin-right: 299px;
       padding: 10px;
   }

   #sidebar-wrapper {
       background-color: #212121;
       float: left;
       margin-left: 5%;
       width: 299px;
   }

       #sidebar {
           padding: 10px;
       }

#footer {
   background-color: #262626;
   clear: both;
   float: left;
   height: 70px;
   line-height: 70px;
   margin: 10px 0 0 5%;
   text-align: center;
   width: 90%;
}
       </style>
<script type="text/javascript">(function(){var a;var b=navigator.userAgent;a=-1!=b.indexOf("Mobile")&&-1!=b.indexOf("WebKit")&&-1==b.indexOf("iPad")||-1!=b.indexOf("Opera Mini")?!0:!1;if(a){var c;a:{var d=window.location.href,e=d.split("?");switch(e.length){case 1:c=d+"?m=1";break a;case 2:c=0<=e[1].search("(^|&)m=")?null:d+"&m=1";break a;default:c=null}}c&&window.location.replace(c)};})();
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body>
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
   function setAttributeOnload(object, attribute, val) {
     if(window.addEventListener) {
       window.addEventListener("load",
         function(){ object[attribute] = val; }, false);
     } else {
       window.attachEvent('onload', function(){ object[attribute] = val; });
     }
   }
 </script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=5733190168009545958&blogName=Bruno+Augusto&publishMode=PUBLISH_MODE_HOSTED&navbarType=BLUE&layoutType=LAYOUTS&searchRoot=http://www.brunoaugusto.co.cc/search&blogLocale=pt_BR&homepageUrl=http://www.brunoaugusto.co.cc/&readAccessMode=PRIVATE&vt=499020333363333496" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
<div></div></div></div>
<div id='outer-wrapper'>
<!-- Header -->
<div id='header-wrapper'>
</div>
<!-- Pages Navigation -->
<div id='navigation'>
<div class='section' id='pages'><div class='widget PageList' id='PageList1'>
<h2>Pages</h2>
<div class='widget-content'>
<ul>
<li class='selected'><a href='http://www.brunoaugusto.co.cc/'>Início</a></li>
<li><a href='http://www.brunoaugusto.co.cc/p/sobre.html'>Sobre</a></li>
</ul>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogID=5733190168009545958&widgetType=PageList&widgetId=PageList1&action=editWidget&sectionId=pages' onclick='return _WidgetManager._PopupConfig(document.getElementById("PageList1"));' target='configPageList1' title='Editar'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div>
</div>
<!-- Main COntent -->
<div id='content-wrapper'>
<div id='main-wrapper'>
<!-- Blog Content -->
<div class='main section' id='main'><div class='widget Blog' id='Blog1'>
<div class='blog-posts hfeed'>
<!-- google_ad_section_start(name=default) -->

         <div class="date-outer">

<h2 class='date-header'><span>26 de fevereiro de 2012</span></h2>

         <div class="date-posts">

<div class='post-outer'>
<div class='post hentry uncustomized-post-template'>
<a name='6827913825321986675'></a>
<h3 class='post-title entry-title'>
<a href='http://www.brunoaugusto.co.cc/2012/02/second.html'>Second</a>
</h3>
<div class='post-header'>
<div class='post-header-line-1'></div>
</div>
<div class='post-body entry-content' id='post-body-6827913825321986675'>
<br>
<div style="font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; margin-bottom: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum, lorem a laoreet molestie, tortor justo luctus nulla, sed posuere enim velit sed risus. Vestibulum sem massa, semper quis ullamcorper at, ullamcorper id erat. Quisque euismod commodo mi vel lobortis. Aenean tincidunt, ante a dapibus commodo, odio leo semper arcu, et placerat velit lacus eget arcu. Mauris ut urna lectus, sed porta velit. Nullam gravida urna sed purus adipiscing at consequat tellus tristique. Donec pretium, metus sit amet fermentum tempus, enim nisi cursus nulla, quis auctor tellus lorem id nunc. Aliquam erat volutpat. Aenean viverra ligula vel justo placerat sit amet pulvinar enim hendrerit. Nunc pulvinar porttitor massa quis accumsan. Ut tempus luctus nulla quis pulvinar. Phasellus ac ligula lorem. Aenean at dui sit amet metus consequat blandit et eu leo. Pellentesque tempor aliquet nunc at dictum. Praesent eleifend, arcu ac porttitor vulputate, felis lacus rhoncus ante, et bibendum ligula nisi sed nunc.</div>
<div style="font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; margin-bottom: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify;">
<br>
</div>
<div style='clear: both;'></div>
</div>
<div class='jump-link'>
<a href='http://www.brunoaugusto.co.cc/2012/02/second.html#more' title='Second'>Leia mais »</a>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Postado por
<span class='fn'>Bruno Augusto</span>
</span>
<span class='post-timestamp'>
às
<a class='timestamp-link' href='http://www.brunoaugusto.co.cc/2012/02/second.html' rel='bookmark' title='permanent link'><abbr class='published' title='2012-02-26T11:10:00-03:00'>11:10</abbr></a>
</span>
<span class='reaction-buttons'>
</span>
<span class='star-ratings'>
</span>
<span class='post-comment-link'>
</span>
<span class='post-backlinks post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1244766336'>
<a href='http://www.blogger.com/post-edit.g?blogID=5733190168009545958&postID=6827913825321986675&from=pencil' title='Editar postagem'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
Marcadores:
<a href='http://www.brunoaugusto.co.cc/search/label/dolor' rel='tag'>dolor</a>,
<a href='http://www.brunoaugusto.co.cc/search/label/ipsum' rel='tag'>ipsum</a>,
<a href='http://www.brunoaugusto.co.cc/search/label/lorem' rel='tag'>lorem</a>,
<a href='http://www.brunoaugusto.co.cc/search/label/second' rel='tag'>second</a>,
<a href='http://www.brunoaugusto.co.cc/search/label/test' rel='tag'>test</a>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
</div>

       </div></div>

<!-- google_ad_section_end -->
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='http://www.brunoaugusto.co.cc/search?updated-max=2012-02-26T11:10:00-03:00&max-results=1' id='Blog1_blog-pager-older-link' title='Postagens mais antigas'>Postagens mais antigas</a>
</span>
<a class='home-link' href='http://www.brunoaugusto.co.cc/'>Início</a>
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<div id='sidebar-wrapper'>
<div id='sidebar'>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus urna enim, ut pharetra dolor. Donec feugiat, nulla tincidunt commodo aliquam, orci dolor sollicitudin nunc, sit amet feugiat elit massa quis erat. Morbi adipiscing metus id dui tempus eget accumsan neque gravida. Nullam risus lorem, porta sed fermentum sed, convallis in mi. Etiam turpis libero, tincidunt quis commodo ac, lacinia at mi. Mauris consectetur gravida erat at sollicitudin. Pellentesque pellentesque eros id justo pellentesque bibendum. Maecenas accumsan quam nisi, eu lacinia turpis. Sed imperdiet, leo vel congue euismod, turpis nisi placerat leo, accumsan iaculis urna elit eu tellus. Aliquam fermentum, erat non imperdiet pulvinar, arcu felis eleifend orci, vitae convallis justo eros eu metus.

                   <br/><br/>

                   Vestibulum at massa vel metus malesuada ullamcorper. Maecenas nec dui vel orci laoreet bibendum. Pellentesque viverra, risus vitae euismod vehicula, lorem lectus volutpat metus, nec rutrum tortor ante ac turpis. Donec in viverra sem. Nulla ullamcorper ligula ac dolor pellentesque vestibulum. Nullam ligula purus, iaculis id vehicula tempus, congue nec sapien. Sed at gravida nisl. Suspendisse potenti. Morbi at leo ac nisl cursus feugiat. Quisque a quam mauris, nec pretium dolor.
               </div>
</div>
<!-- Footer -->
<div id='footer'>
               Copyright  2012 - Alguns direitos reservados
           </div>
</div>
<script type='text/javascript'>

           /**
            * Sidebar Height Hack - Temporary
            */
           $( document ).ready( function() {

               var sHeight = $( '#sidebar' ).height();
               var mHeight = $( '#main-wrapper' ).height();

               if( sHeight > mHeight ) {

                   $( '#main-wrapper' ).height( sHeight );

               } else {

                   $( '#sidebar-wrapper' ).height( mHeight );
               }
           });

       </script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="http://www.blogger.com/static/v1/widgets/2288431260-widgets.js"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '5733190168009545958';BLOG_attachCsiOnload(''); }_WidgetManager._Init('http://www.blogger.com/rearrange?blogID\x3d5733190168009545958','http://www.brunoaugusto.co.cc/','5733190168009545958');
_WidgetManager._SetPageActionUrl('http://www.blogger.com/display?blogID\x3d5733190168009545958','APq4FmC7VVlYAfsbCHpqCkVYAMR_tiEHI4_uKOnMy52XJJ9wELmq7kt9B9ZKuefg1UVNzT3mLML3yYAnMn1CLG3lIfB2lr0dTKLFxEKEHTUyOHRiFLEvgHY\x3d','AOuZoY7T3kAyFAVqN63-E-fshfndJn6tuw:1330685579594');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'bloggerUrl': 'http://www.blogger.com', 'title': 'Bruno Augusto', 'pageType': 'index', 'url': 'http://www.brunoaugusto.co.cc/', 'canonicalUrl': 'http://www.brunoaugusto.co.cc/', 'canonicalHomepageUrl': 'http://www.brunoaugusto.co.cc/', 'homepageUrl': 'http://www.brunoaugusto.co.cc/', 'blogspotFaviconUrl': 'http://www.brunoaugusto.co.cc/favicon.ico', 'enabledCommentProfileImages': true, 'searchLabel': '', 'searchQuery': '', 'pageName': '', 'pageTitle': 'Bruno Augusto', 'encoding': 'UTF-8', 'locale': 'pt-BR', 'isPrivate': true, 'isMobile': false, 'mobileClass': '', 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42Bruno Augusto - Atom\42 href\75\42http://www.brunoaugusto.co.cc/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42Bruno Augusto - RSS\42 href\75\42http://www.brunoaugusto.co.cc/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42Bruno Augusto - Atom\42 href\75\42http://www.blogger.com/feeds/5733190168009545958/posts/default\42 /\76\n\74link rel\75\42EditURI\42 type\75\42application/rsd+xml\42 title\75\42RSD\42 href\75\42http://www.blogger.com/rsd.g?blogID\0755733190168009545958\42 /\076', 'meTag': '', 'openIdOpTag': '\74link rel\75\42openid.server\42 href\75\42http://www.blogger.com/openid-server.g\42 /\76\n', 'imageSrcTag': '', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var a\75window;function c(B){this.t\75{};this.tick\75function(b,i,d){d\75void 0!\75d?d:(new Date).getTime();this.t[b]\75[d,i]};this.tick(\42start\42,null,B)}var f\75new c;a.jstiming\75{Timer:c,load:f};try{var g\75null;a.chrome\46\46a.chrome.csi\46\46(g\75Math.floor(a.chrome.csi().pageT));null\75\75g\46\46a.gtbExternal\46\46(g\75a.gtbExternal.pageT());null\75\75g\46\46a.external\46\46(g\75a.external.pageT);g\46\46(a.jstiming.pt\75g)}catch(h){};a.tickAboveFold\75function(B){var e\0750;if(b.offsetParent){do e+\75b.offsetTop;while(b\75b.offsetParent)}b\75e;750\76\75b\46\46a.jstiming.load.tick(\42aft\42)};var j\75!1;function k(){j||(j\75!0,a.jstiming.load.tick(\42firstScrollTime\42))}a.addEventListener?a.addEventListener(\42scroll\42,k,!1):a.attachEvent(\42onscroll\42,k);\n })();\74/script\076', 'mobileHeadScript': '', 'analyticsAccountNumber': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/f75e48f708466c7f/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/69b1fde4979743e2'}}, {'name': 'skin', 'data': {'vars': {}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '/?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '/?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '/?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '/?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '/?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '/?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '/?view\75timeslide'}}}]);
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'pages', null, document.getElementById('PageList1'), {'title': 'Pages', 'links': [{'href': 'http://www.brunoaugusto.co.cc/', 'title': 'Início', 'isCurrentPage': true}, {'href': 'http://www.brunoaugusto.co.cc/p/sobre.html', 'title': 'Sobre', 'isCurrentPage': false}], 'mobile': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'http://www.blogger.com/static/v1/jsbin/1815408701-lbx_pt-BR.js', 'lightboxCssUrl': 'http://www.blogger.com/static/v1/v-css/3224976484-lightbox_bundle.css'}, 'displayModeFull'));
</script>
</body>
</html>

Já com a sua implementação, adaptada à hierarquia aparentemente imposta pelo Blogger (onde o layout será usado) ficou assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/2002994779-widget_css_bundle.css' />
<link type="text/css" rel="stylesheet" href="http://www.blogger.com/dyn-css/authorization.css?targetBlogID=5733190168009545958&zx=2a24e081-cd28-45a0-9648-424a412e40f4"/>
<style type="text/css">
#navbar-iframe { display:block }
</style>
<style id='page-skin-1' type='text/css'><!--

--></style>
<style type='text/css'>

* {
   margin: 0;
   padding: 0;
}

body {
   background: #131313 url(http://4.bp.blogspot.com/_ActSVcJ9YKs/TLZPwUJEM9I/AAAAAAAAA9A/coCU7FoK_e4/s000/background.png) left 175px repeat-x;
   color: #a59b8e;
   font: 75%;
   height: 100%;
   margin: 0;
   padding: 0;
}

a:link, a:visited {
   color: #DC9843;
   outline: none;
   text-decoration: none;
}

a:hover {
   color: #FFF;
   outline: none;
   text-decoration: none;
}

a img {
   border: none;
}

#outer-wrapper {
   float: left;
}

#header-wrapper {
   height: 138px;
   margin: 0 auto;
   overflow: hidden;
}

#navigation {
   background: url(http://4.bp.blogspot.com/_ActSVcJ9YKs/TLZP0jTMGaI/AAAAAAAAA90/eD197uVWPGU/s000/nav-background.png) left bottom repeat-x;
   color: #FFF;
   display: block;
   font-size: 12px;
   margin: 0 5% 10px 5%;
   padding-top: 12px;
   text-transform: uppercase;
}

   /**
    * Hiding Pages Title (after each Update, Blogger seems to reset it)
    */
   #navigation h2 {
       display: none;
       visibility: hidden;
   }

   #navigation ul {
       list-style: none;
   }

   #navigation li {
       display: inline;
       float: left;
       margin: 0 5px 5px 0;
       padding: 15px;
   }

   #navigation li.selected, #navigation li:hover {
       background: url(http://2.bp.blogspot.com/_ActSVcJ9YKs/TLZP08rWSLI/AAAAAAAAA94/QqjqP4mInOE/s000/nav-background-hover.png) left top repeat-x;
   }

   #navigation li a {
       color: #FFF;
       font-weight: bold;
   }

#content-wrapper {

}

   #main-wrapper {
       padding: 20px 220px 20px 20px
   }

   #sidebar-wrapper {
       float: right;
       padding: 20px;
       width: 160px;
   }

#footer {
   background-color: #262626;
   clear: both;
   float: left;
   height: 70px;
   line-height: 70px;
   margin: 10px 0 0 5%;
   text-align: center;
   width: 90%;
}
       </style>
<script type="text/javascript">(function(){var a;var b=navigator.userAgent;a=-1!=b.indexOf("Mobile")&&-1!=b.indexOf("WebKit")&&-1==b.indexOf("iPad")||-1!=b.indexOf("Opera Mini")?!0:!1;if(a){var c;a:{var d=window.location.href,e=d.split("?");switch(e.length){case 1:c=d+"?m=1";break a;case 2:c=0<=e[1].search("(^|&)m=")?null:d+"&m=1";break a;default:c=null}}c&&window.location.replace(c)};})();
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body>
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
   function setAttributeOnload(object, attribute, val) {
     if(window.addEventListener) {
       window.addEventListener("load",
         function(){ object[attribute] = val; }, false);
     } else {
       window.attachEvent('onload', function(){ object[attribute] = val; });
     }
   }
 </script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=5733190168009545958&blogName=Bruno+Augusto&publishMode=PUBLISH_MODE_HOSTED&navbarType=BLUE&layoutType=LAYOUTS&searchRoot=http://www.brunoaugusto.co.cc/search&blogLocale=pt_BR&homepageUrl=http://www.brunoaugusto.co.cc/&readAccessMode=PRIVATE&vt=499020333363333496" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
<div></div></div></div>
<div id='outer-wrapper'>
<!-- Header -->
<div id='header-wrapper'>
</div>
<!-- Pages Navigation -->
<div id='navigation'>
<div class='section' id='pages'><div class='widget PageList' id='PageList1'>
<h2>Pages</h2>
<div class='widget-content'>
<ul>
<li class='selected'><a href='http://www.brunoaugusto.co.cc/'>Início</a></li>
<li><a href='http://www.brunoaugusto.co.cc/p/sobre.html'>Sobre</a></li>
</ul>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogID=5733190168009545958&widgetType=PageList&widgetId=PageList1&action=editWidget&sectionId=pages' onclick='return _WidgetManager._PopupConfig(document.getElementById("PageList1"));' target='configPageList1' title='Editar'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div>
</div>
<!-- Main COntent -->
<div id='content-wrapper'>
<div id='sidebar-wrapper'>

                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus urna enim, ut pharetra dolor. Donec feugiat, nulla tincidunt commodo aliquam, orci dolor sollicitudin nunc, sit amet feugiat elit massa quis erat. Morbi adipiscing metus id dui tempus eget accumsan neque gravida. Nullam risus lorem, porta sed fermentum sed, convallis in mi. Etiam turpis libero, tincidunt quis commodo ac, lacinia at mi. Mauris consectetur gravida erat at sollicitudin. Pellentesque pellentesque eros id justo pellentesque bibendum. Maecenas accumsan quam nisi, eu lacinia turpis. Sed imperdiet, leo vel congue euismod, turpis nisi placerat leo, accumsan iaculis urna elit eu tellus. Aliquam fermentum, erat non imperdiet pulvinar, arcu felis eleifend orci, vitae convallis justo eros eu metus.

                   <br/><br/>

                   Vestibulum at massa vel metus malesuada ullamcorper. Maecenas nec dui vel orci laoreet bibendum. Pellentesque viverra, risus vitae euismod vehicula, lorem lectus volutpat metus, nec rutrum tortor ante ac turpis. Donec in viverra sem. Nulla ullamcorper ligula ac dolor pellentesque vestibulum. Nullam ligula purus, iaculis id vehicula tempus, congue nec sapien. Sed at gravida nisl. Suspendisse potenti. Morbi at leo ac nisl cursus feugiat. Quisque a quam mauris, nec pretium dolor.
           </div>
<div id='main-wrapper'>
<!-- Blog Content -->
<div class='main section' id='main'><div class='widget Blog' id='Blog1'>
<div class='blog-posts hfeed'>
<!-- google_ad_section_start(name=default) -->

         <div class="date-outer">

<h2 class='date-header'><span>26 de fevereiro de 2012</span></h2>

         <div class="date-posts">

<div class='post-outer'>
<div class='post hentry uncustomized-post-template'>
<a name='6827913825321986675'></a>
<h3 class='post-title entry-title'>
<a href='http://www.brunoaugusto.co.cc/2012/02/second.html'>Second</a>
</h3>
<div class='post-header'>
<div class='post-header-line-1'></div>
</div>
<div class='post-body entry-content' id='post-body-6827913825321986675'>
<br>
<div style="font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; margin-bottom: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum, lorem a laoreet molestie, tortor justo luctus nulla, sed posuere enim velit sed risus. Vestibulum sem massa, semper quis ullamcorper at, ullamcorper id erat. Quisque euismod commodo mi vel lobortis. Aenean tincidunt, ante a dapibus commodo, odio leo semper arcu, et placerat velit lacus eget arcu. Mauris ut urna lectus, sed porta velit. Nullam gravida urna sed purus adipiscing at consequat tellus tristique. Donec pretium, metus sit amet fermentum tempus, enim nisi cursus nulla, quis auctor tellus lorem id nunc. Aliquam erat volutpat. Aenean viverra ligula vel justo placerat sit amet pulvinar enim hendrerit. Nunc pulvinar porttitor massa quis accumsan. Ut tempus luctus nulla quis pulvinar. Phasellus ac ligula lorem. Aenean at dui sit amet metus consequat blandit et eu leo. Pellentesque tempor aliquet nunc at dictum. Praesent eleifend, arcu ac porttitor vulputate, felis lacus rhoncus ante, et bibendum ligula nisi sed nunc.</div>
<div style="font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; margin-bottom: 14px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify;">
<br>
</div>
<div style='clear: both;'></div>
</div>
<div class='jump-link'>
<a href='http://www.brunoaugusto.co.cc/2012/02/second.html#more' title='Second'>Leia mais »</a>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Postado por
<span class='fn'>Bruno Augusto</span>
</span>
<span class='post-timestamp'>
às
<a class='timestamp-link' href='http://www.brunoaugusto.co.cc/2012/02/second.html' rel='bookmark' title='permanent link'><abbr class='published' title='2012-02-26T11:10:00-03:00'>11:10</abbr></a>
</span>
<span class='reaction-buttons'>
</span>
<span class='star-ratings'>
</span>
<span class='post-comment-link'>
</span>
<span class='post-backlinks post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1244766336'>
<a href='http://www.blogger.com/post-edit.g?blogID=5733190168009545958&postID=6827913825321986675&from=pencil' title='Editar postagem'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
Marcadores:
<a href='http://www.brunoaugusto.co.cc/search/label/dolor' rel='tag'>dolor</a>,
<a href='http://www.brunoaugusto.co.cc/search/label/ipsum' rel='tag'>ipsum</a>,
<a href='http://www.brunoaugusto.co.cc/search/label/lorem' rel='tag'>lorem</a>,
<a href='http://www.brunoaugusto.co.cc/search/label/second' rel='tag'>second</a>,
<a href='http://www.brunoaugusto.co.cc/search/label/test' rel='tag'>test</a>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
</div>

       </div></div>

<!-- google_ad_section_end -->
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='http://www.brunoaugusto.co.cc/search?updated-max=2012-02-26T11:10:00-03:00&max-results=1' id='Blog1_blog-pager-older-link' title='Postagens mais antigas'>Postagens mais antigas</a>
</span>
<a class='home-link' href='http://www.brunoaugusto.co.cc/'>Início</a>
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<!-- Footer -->
<div id='footer'>
               Copyright  2012 - Alguns direitos reservados
           </div>
</div>
<script type='text/javascript'>

           /**
            * Sidebar Height Hack - Temporary
            */
           /*$( document ).ready( function() {

               var sHeight = $( '#sidebar' ).height();
               var mHeight = $( '#main-wrapper' ).height();

               if( sHeight > mHeight ) {

                   $( '#main-wrapper' ).height( sHeight );

               } else {

                   $( '#sidebar-wrapper' ).height( mHeight );
               }
           });*/

       </script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="http://www.blogger.com/static/v1/widgets/2288431260-widgets.js"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '5733190168009545958';BLOG_attachCsiOnload(''); }_WidgetManager._Init('http://www.blogger.com/rearrange?blogID\x3d5733190168009545958','http://www.brunoaugusto.co.cc/','5733190168009545958');
_WidgetManager._SetPageActionUrl('http://www.blogger.com/display?blogID\x3d5733190168009545958','APq4FmDSNUASMfwEIDdoUJHMGqEgzkMA7us_GRoOhArx4zCP4uWi4hT-KSIY0uMpA4XrwxgOQGsFCp2RycOQcYIt3aYX02KaofLhpY1yaDFy0NZ_fAa3Ko4\x3d','AOuZoY7hlDUN71QDhjVYgwdlDdL75RLHFw:1330685427661');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'bloggerUrl': 'http://www.blogger.com', 'title': 'Bruno Augusto', 'pageType': 'index', 'url': 'http://www.brunoaugusto.co.cc/', 'canonicalUrl': 'http://www.brunoaugusto.co.cc/', 'canonicalHomepageUrl': 'http://www.brunoaugusto.co.cc/', 'homepageUrl': 'http://www.brunoaugusto.co.cc/', 'blogspotFaviconUrl': 'http://www.brunoaugusto.co.cc/favicon.ico', 'enabledCommentProfileImages': true, 'searchLabel': '', 'searchQuery': '', 'pageName': '', 'pageTitle': 'Bruno Augusto', 'encoding': 'UTF-8', 'locale': 'pt-BR', 'isPrivate': true, 'isMobile': false, 'mobileClass': '', 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42Bruno Augusto - Atom\42 href\75\42http://www.brunoaugusto.co.cc/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42Bruno Augusto - RSS\42 href\75\42http://www.brunoaugusto.co.cc/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42Bruno Augusto - Atom\42 href\75\42http://www.blogger.com/feeds/5733190168009545958/posts/default\42 /\76\n\74link rel\75\42EditURI\42 type\75\42application/rsd+xml\42 title\75\42RSD\42 href\75\42http://www.blogger.com/rsd.g?blogID\0755733190168009545958\42 /\076', 'meTag': '', 'openIdOpTag': '\74link rel\75\42openid.server\42 href\75\42http://www.blogger.com/openid-server.g\42 /\76\n', 'imageSrcTag': '', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var a\75window;function c(B){this.t\75{};this.tick\75function(b,i,d){d\75void 0!\75d?d:(new Date).getTime();this.t[b]\75[d,i]};this.tick(\42start\42,null,B)}var f\75new c;a.jstiming\75{Timer:c,load:f};try{var g\75null;a.chrome\46\46a.chrome.csi\46\46(g\75Math.floor(a.chrome.csi().pageT));null\75\75g\46\46a.gtbExternal\46\46(g\75a.gtbExternal.pageT());null\75\75g\46\46a.external\46\46(g\75a.external.pageT);g\46\46(a.jstiming.pt\75g)}catch(h){};a.tickAboveFold\75function(B){var e\0750;if(b.offsetParent){do e+\75b.offsetTop;while(b\75b.offsetParent)}b\75e;750\76\75b\46\46a.jstiming.load.tick(\42aft\42)};var j\75!1;function k(){j||(j\75!0,a.jstiming.load.tick(\42firstScrollTime\42))}a.addEventListener?a.addEventListener(\42scroll\42,k,!1):a.attachEvent(\42onscroll\42,k);\n })();\74/script\076', 'mobileHeadScript': '', 'analyticsAccountNumber': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/f75e48f708466c7f/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/69b1fde4979743e2'}}, {'name': 'skin', 'data': {'vars': {}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '/?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '/?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '/?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '/?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '/?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '/?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '/?view\75timeslide'}}}]);
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'pages', null, document.getElementById('PageList1'), {'title': 'Pages', 'links': [{'href': 'http://www.brunoaugusto.co.cc/', 'title': 'Início', 'isCurrentPage': true}, {'href': 'http://www.brunoaugusto.co.cc/p/sobre.html', 'title': 'Sobre', 'isCurrentPage': false}], 'mobile': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'http://www.blogger.com/static/v1/jsbin/1815408701-lbx_pt-BR.js', 'lightboxCssUrl': 'http://www.blogger.com/static/v1/v-css/3224976484-lightbox_bundle.css'}, 'displayModeFull'));
</script>
</body>
</html>

Se você puder se dar ao trabalho de copiar esse CODE e testar verá que tem um pequeno grande problema na porção principal, influenciada pela barra lateral.

E eu tenho certeza que é por causa dela pois se eu adicionar um float: left em #main-wrapper, ele "cai" e esse espaço gigante some.

Aproveitando o tópico, já que seria minha próxima pergunta, veja também que há uma gambiarra para a altura do sidebar acompanhar a altura do conteúdo principal (ou vice-versa, nos testes de resolução).

Dá pra sua solução já se adequar a corrigir esse problema?

William Bruno · Março 2, 2012

Se você puder se dar ao trabalho de copiar esse CODE e testar verá que tem um pequeno grande problema na porção principal, influenciada pela barra lateral.

E eu tenho certeza que é por causa dela pois se eu adicionar um float: left em #main-wrapper, ele "cai" e esse espaço gigante some.

Desculpa @Bruno, mas você precisa explicar.

Eu executei aqui, e sinceramente não entendi.

Lembre-se que não conheço oque você quer fazer, não sei como deveria ficar.. explique.

Aproveitando o tópico,

não aproveite, ou pelo menos espere terminarmos uma coisa. Só então partimos para a próxima.

já que seria minha próxima pergunta, veja também que há uma gambiarra para a altura do sidebar acompanhar a altura do conteúdo principal (ou vice-versa, nos testes de resolução).

você tá falando sobre Faux Columns ?

você precisa realmente explicar.. jogar o código e esperar que eu execute e entenda tudo só vendo, não rola.

Bruno Augusto · Março 2, 2012

Desculpa @Bruno, mas você precisa explicar.

Eu executei aqui, e sinceramente não entendi.

Lembre-se que não conheço oque você quer fazer, não sei como deveria ficar.. explique.

Jura que você não viu nada errado (ou não-certo) quando testou?

Essa sua implementação, no HTML ligeiramente poluído que o Blogger gera através do widget interno deles para listar os posts, deixou um espaço ENORME entre o fim do texto do parágrafo e o link "Leia mais".

E eu confirmei que foi com a sua implementação adicionando a referida propriedade no referido seletor forçando o layout a quebrar. E quando quebrou, esse espaço extra sumiu.

não aproveite, ou pelo menos espere terminarmos uma coisa. Só então partimos para a próxima.

A intenção de "aproveitar" a que me referi nem era tanto no sentido de REALMENTE implemntá-la, mas sim de reforçar que a solução deste problema não impedisse ou dificultasse a solução do próximo.

você tá falando sobre Faux Columns ?

você precisa realmente explicar.. jogar o código e esperar que eu execute e entenda tudo só vendo, não rola.

Em técnica sim, mas se possível eu queria fazer não da forma tradicional, com imagens. Sei que dá pra fazer porque anos atrás eu fiz, mas nem lembro como é.

William Bruno · Março 2, 2012

Jura que você não viu nada errado (ou não-certo) quando testou?

eu não sei oque seria o certo, então não posso julgar oq é errado. =)

sério.. como eu ia saber q não era intenção tua ? pensa bem..

Evita esse tipo de coisa cara, explica. Pronto. Respondo dezenas de tópicos por dia.. imagina a dor de cabeça se eu tiver que ficar executando o código de todo mundo, e procurando os erros..

é inviável !! e fora que nesse meio tempo eu trabalho, lembra ?

explique.. na boa.. facilite as coisas. :lol:

@post

já já vejo oq aconteceu.

Bruno Augusto · Março 3, 2012

Tá certo, faltou deixar bem claro o espaço gigante gerado. Eu até pensei em bater uma screenshot, mas não ia caber :yay:

Estou no aguardo

Vih · Março 5, 2012

bom na linha 199 tem uma div

<div style='clear: both;'></div>

eu tirei esse style dela ai o espaço enorme saiu...

espero que isso ajude...

Bruno Augusto · Março 5, 2012

Santa Batatinha :o

Foi o ÚNICO HTMl remanescente da implementação anterior (com margins) que mantive por acidente.

Pra finalizar, alguém pode confirmar o porquê do equivalente ao padding-right ser 220px

Seriam 160px + todos os 3 paddings onde os 220px estão? (20 + 20 + 20)?

Vih · Março 5, 2012

na linha 99 onde tem os CSS tem uma parte em que você coloca padding-right de 220px

#main-wrapper {
       padding: 20px 220px 20px 20px
   }

espero que isso ajude.

Bruno Augusto · Março 6, 2012

Onde está eu sei, amigo. Quero saber o porquê de ser 220px, pois pretendo aumentar a largura da barra lateral e quero saber quanto de paddng-right eu irei colocar. :thumbsup:

William Bruno · Março 6, 2012

@Bruno, você não leu o script e o comentário original ?

/* o padding-right, é a soma do width da coluna com o padding desejado */

As vezes você complica o simples..

Bruno Augusto · Março 6, 2012

Mas eu li o script, William.

Mas eu não entendi direito o porquê da inclusão do padding-top. Esquerda e direita tudo bem, mas e asuperior?

William Bruno · Março 6, 2012

o padding top era pq eu queria separar o conteudo do topo da viewport do browser.

a "técnica" mesmo, é o padding-right, e pronto.

Bruno Augusto · Março 6, 2012

Então cara, por isso que não entendi.

160px de largura da coluna mais 40px de padding (esquerdo e direito) são 200px e não 220px. Se os espaçamentos superior e inferior não influenciam, de onde vieram os outros 20?

Essa é minha dúvida.

Vih · Março 7, 2012

substitui o

#main-wrapper {
       padding: 20px 220px 20px 20px
   }

por

#main-wrapper {
       padding: 20px 20px 20px 20px
   }

padding: 20px(padding-top) 20px(padding-rigth) 20px(padding-bottom) 20px(padding-left)

é isso q você não intendeu?

William Bruno · Março 7, 2012

@Bruno, veja:

#coluna {
       float: right;
       width: 160px;
       background: #f0f;
       padding: 20px;
}

ok ? 160+20+20 = 200, então o elemento #coluna tem 200 de largura.

eu declarei padding-right de 220px no #conteudo, para dar 20px de espaçamento entre o conteudo do #conteudo, e o #coluna.

Tão simples qnto isso.

Arquivado

[Resolvido] Barra Lateral de Largura Fixa...

Recommended Posts

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vih 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vih 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vih 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501