A maneira certa de usar a propriedade Float no CSS

Buscando uma solução definitiva para lidar com os "elementos flutuantes" no CSS encontrei um tutorial completinho com o uso do Float no CSS. O site indica a melhor maneira de posicionar botões, layouts com duas colunas e nos ensina didaticamente como fazer o melhor uso da propriedade. Quebras de layout e elementos tortos nunca mais! UPDATE: Confira também este link com vários macetes para dominar a propriedade Float.

Tem sede de design e código? Siga-me no Twitter @richardbarros

12 comentá em “A maneira certa de usar a propriedade Float no CSS

  1. Ricardo Grana 11/01/2008 23:53

    Se ninguém comentou, após muito tempo, deixe-me agradecer, ha mto tempo estava atras de um tutorial desses.

    Very thank you!

    Responder

  2. Paulo Miguel 22/10/2008 15:00

    Excelente Tutorial, muito simples e direto, continue assim

    Responder

  3. Aprilo 11/05/2009 19:12

    Parabéns pelo link do tutorial float. Explicado de um jeito fácil de entender.
    Obrigada.

    Responder

  4. TILiBRA 04/11/2009 10:01

    Muito obrigado !!!
    Excelente, e muito bem detalhado !

    Parabéns !

    Responder

  5. Alfredo 18/10/2010 15:58

    Ajudou em nada!!

    Responder

  6. Alfredo 18/10/2010 15:59

    Fraco demaissss !!

    num tem nada aqui!!

    Responder

  7. alan 02/11/2010 10:03

    sempre achei que podia usar de qualquer maneira, então era por isso que minha coluna do meu blog fica em baixo da coluna do conteudo!!

    Responder

  8. Éder 19/11/2010 21:08

    Olá Richard,

    Estou fazendo meu blog (www.yanaguita.com.br/blog) usando o belo tema Meta-Morphosis, do WooThemes. Nesse tema, na header do site, vem primeiro o menu das páginas, abaixo vem o espaço para logomarca do site e abaixo disso vem o menu de categorias.

    Como há um espaço vazio ao lado direito da logomarca do site, gostaria de colocar um banner 468×60 do Adsense nesse espaço. O problema é que o style.css não dá suporte nativo para isso:

    #header {width: 100%;height: 100px;padding:25px 0 20px 0;clear:both;position:relative;}
    #header a {width:460px; height:100px; display:block;}

    OBS: a “header a” se refere à logomarca do site.

    Eu teria que usar aquele lance de “float” para minha idéia funcionar, certo? A questão é: como posso fazer isso, já que não sou expert em css? Alguma sugestão?

    Responder

  9. Raimundo Marvin 16/09/2011 17:39

    E a primeira vez que acesso seu site e acheio muito bacana , eu sou de São Luis do Marnhão e estava com dificuldade de usar float e dei de cara com seu magnifico tutorial, parabens por todo o trabalho

    Responder

  10. Eduardo Borgheti 01/01/2013 18:17

    OII… cara to com um baita problema aqui c vc puder me ajudar ficaria mto grato!

    To trabalhando com 3 div e mais uma principal! div=esquerda; div=centro; div=direita;

    o problema eh que nao consigo alinhar as 3 dentro da principal! esquerda e centro c alinham perfeitamente mas a da direita alinha mas fica sempre muito abaixo das outras! e a tag float: right só alinha para a direita mais não alinha no topo junto com as outras! jah fiz de tudo para alinhar mas não teve geito!

    c puder me ajudar agradeço desde já!

    Responder

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>