Tecnologia, nerdices, games, contos de trolls, e mais blábláblá digital.

Olá,

Quase uma década um mês depois do post de enche lingüiça re-inauguração, aqui vai algo útil ou não, esses dias voltei a trabalhar com carga horária fixa (sem mais freelas aleatórios), e estive montando um portal… Lá voltaram algumas dificuldades, e lá vou eu para o nosso amigo Maujor e W3Schools, mas lá apesar de serem fontes muito boas, não contém tudo… E uma coisa que fiquei atrás foi de como resolver um “Bug” gerado por Floats de Divs dentro de outras Divs…

Por exemplo:

<div id="header">
    <div id="logo" style="float:left;"><img src="logo.png"/></div>
    <div id="patrocinio" style="float:left;"><img src="ads.png"/></div>
</div>
<div id="content">
    <div id="coluna1" style="float:left;">
        asdasdasd<br/>
        asdasdasd<br/>
        asdasdasd<br/>
    </div>
    <div id="coluna2" style="float:left;">
        asdasdasd<br/>
        asdasdasd<br/>
        asdasdasd<br/>
    </div>
</div>

Para a div content exibir o conteúdo no lugar certo (exatamente abaixo e não no meio da div header), precisaríamos por uma div ao final dos conteúdos, antes de começar a próxima div, mas ainda dentro da div com o float, contento:

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

Mas aí comecei a pensar em alguma propriedade no CSS ou alguma forma de inserir isso de forma não tão “bruta”… Pois imagina a pessoa ir olhar o código fonte de um portal e se deparar com isso… me lembra logo P.O.G. (Programação Orientada a Gambiarras). Eu sei, eu sei, ninguém jamais olha o código fonte de um portal… Eu fui abrir o Globo.com e tinha trocentas linhas, a maioria bagunçada e com trocentos espaços. Mas é bom ter um código organizado e sem gambiarras do mesmo jeito. Então aqui vai uma “menor”…

Esse código abaixo ficaria no seu CSS, ou você copiaria para um “style” da div, mas teria que copiar para todas e no final ficaria maior q por a div com o clear:both;, logo, usem css. =]

.clear:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

Explicando o código: o “:after” serve para inserir um conteúdo após o fim da div (do que for escolhido, no caso), ou seja, no fim da DIV, antes de começar a outra, ele cria um conteúdo num bloco de tamanho zero com um “ponto” invisível, ou seja, não cria nada visualmente, mas como já possui a propriedade “clear:both;“, já resolve o nosso bug. Mas como nem tudo é perfeito, e o IE não suporta a propriedade “:after“, usamos uma micro-gambiarra…

Sabe aqueles <!– [if IE]> Conteúdo para ficar mostrando somente no IE <![end if]–> ? Exato, usamos ele para incluir um CSS contendo só as gambiarras pro IE… E aqui vai:

.clear {
    zoom: 1;     /* triggers hasLayout */
}

Não lembro muito bem do porque, mas é como se sem o “zoom:1;” ele tivesse algum tipo de padding e esse triggers hasLayout é uma gambiarra da Microsoft para mudar alguns parâmetros do objeto, mas como está funcionando, fica a dica =P, lembrando que aí não está com a propriedade “:after” como falei.

Poisé, quase 4 da matina e eu aqui digitando isso… vou é comer algo e programar… estou ao som de ♫ Paramore [Brand new eyes] #11 All I Wanted.

Edit: Ahh, estive vendo, a maioria dos comentários do blog são Spammers, isso pra não dizer que só nosso amigo Thiago Emmanoel (ThEm / Bagomin) comentou. Aproveitando que falei dele, parabéns, o filho nasceu (faz alguns dias já, mas só estou postando agora, então… aqui vai né ). Parabéns mais uma vez!

 style="float:left;"