CSS: Truques para dominar a propriedade Float

O float é uma propriedade meio imprevisível no CSS. Este é um tutorial explicando passo-a-passo o seu funcionamento com alguns macetes que você não encontrará em nenhum site de referência CSS.

Para começar, vou usar uma estrutura Html simples com 3 tags Div:

<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>

Tutorial Div 1

O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Se quisermos o menu à esquerda e o conteúdo à direita, o que os desenvolvedores geralmente fazem é:

.menu { float: left; width: 30%; }
.conteudo { float: right; width: 60%; }

Tutorial Float 2

Mas isso pode gerar uma série de dores de cabeça mais a frente no desenvolvimento. Vamos estudar o que pode dar errado e entender o porquê.

Macetes que ninguém ensinará para você

Esta técnica gera – principalmente no Internet Explorer – 2 erros de renderização:

1. Float sobrepõe o resto do site

Note que a borda do div pai que chamamos de “tudo” não está acompanhando os divs internos (.menu e .conteudo).

Layout Trepado

Para forçar o div “tudo” a circular também os objetos com float, mude o seu modo de exibição para table desta forma:

.tudo { display: table; }

UPDATE: um hack que pode funcionar melhor que o display:table; é adicionar uma div com clear: both; depois de todos os divs flutuantes.

.clear { clear: both; }
<div class="clear"> </div>

Muito bom, agora que o seu float está integrado com o restante do conteúdo da maneira que você queria, falta o cheque-mate.

2. Float:right não alinha com o Float:left

Quem já encontrou este problema sabe o quanto é irritante. Em alguns casos, as colunas não ficam uma do lado da outra NUNCA, por mais que você tente.

Float trepado 2

Para corrigir isso devemos usar o Float da maneira correta. Ao invés de colocar float:left; no da esquerda e float:right; no da direita, colocamos apenas no da esquerda e deixamos o da direita alinhar naturalmente com um espaço de margem.

Veja como é simples:

.menu { float: left; width: 30%; }
.conteudo { margin-left: 30%; }

Veja o código combinado de html e css:

<!-- CSS -->
<style rel="stylesheet" type="text/css">
.tudo { display: table; }
.menu { float: left; width: 30%; }
.conteudo { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>

Float Ok

Finalmente, um float dentro dos padrões e funcionando em qualquer browser. A fera está domada!

Gostou desse texto? Siga-me no Twitter @richardbarros

210 comentá em “CSS: Truques para dominar a propriedade Float

  1. helio 24/12/2007 17:09

    manero esse display: table
    sabia nao, eu ja colocaria tudo pra flutuar…

    faria uma gambiarra total xD

    assim fica melhor

    Responder

  2. Gabi 24/12/2007 18:50

    display: table, também n conhecia! Mto boa a dica!! Como sempre! =D

    Responder

  3. Helder Santana 26/12/2007 09:45

    Estava conversando com o Dulcetti no Blogcamp PR sobre o display:table , segundo ele não é 100% efetivo para floats.

    Abraço.

    Responder

  4. Richard Barros 26/12/2007 15:11

    @helder: Certamente não é 100% efetivo, mas servirá em alguns casos para alguem que esteja quebrando cabeça na montagem de um layout com float.

    Lembro a todos que os macetes ou css hacks em geral não devem ser incorporados à sua metodologia de desenvolvimento, mas conhecer todas as possibilidades certamente ajudará numa situação extraordinária.

    Responder

  5. Jonathan 27/12/2007 15:11

    Cara…so num te do um bjo pq eu num so gay…heheheh… vlw d+++… salvou o dia !!!

    Responder

  6. Vanessa 24/01/2008 10:23

    Poxa, funcionou legal no firefox, mas no IE 7 não funcionou….não testei no IE 6.
    Tem algum macete pra funcionar no IE 7?

    Responder

  7. gabriel 25/01/2008 16:43

    Valeu mesmo!!
    Tava arrancando os cabelos hehe.
    Já tinha feito muita gambiarra pra tentar solucionar este problema! Acho que a unica coisa que não tinha tentado era isso… porém tenho um pouco de receio a como isto funciona no IE, ele não interpreta bem a propriedade display:table;
    No IE 6 funciona quando você coloca um elemento float:left e um float:right, mas porque nesta situação o elemento ao redor aumenta sempre nele mesmo sem declarar esta propriedade, digamos que é um bug para o bem… mas bom seria se em todos funcionasse da mesma maneira…
    A propósito não testei no IE 7

    Responder

  8. Junior 24/03/2008 20:16

    Valeu cara. Gostei dos macetes que postou aqui.

    Sempre vou me lembrar dessas dicas
    =)

    E os testes q eu fiz pro site q eu to fazendo, funcionou em todos os browsers (Firefox 2.0.0.12, IE 7, IE 8 beta, Safari 3.1 e Opera
    9.26) sem problema nenhum.

    Vai pros favoritos
    =)

    Responder

  9. Paulo Henrique 14/04/2008 02:22

    Primeiro duvidei do código mas quando pus a mão na massa vi que estava tudo certinho. Parabéns pelo blog, cara.

    Responder

  10. Wilian Fiabani 28/04/2008 10:11

    caro Richard, tudo bem?
    poderia me explicar brevemente como faço para que um div circule outro(um div dentro de outro), de forma que o div interno(conteudo) esteja com position:absolute?

    desde já agradeço, grande abraço Richard.

    Responder

  11. Aurélio 07/05/2008 07:51

    Estou com o mesmo problema da Vanessa. No IE 7 não funciona. Alguma dica?

    Responder

  12. Fernando 14/05/2008 10:47

    Cara, cacei isso semanas! Uma dica simples e valiosa! Obrigado!

    Nota para Wilian: acho que div absolute é referente à janela e não ao div-pai. Pra isso, o div deveria ser relative.

    Responder

  13. Mário Homem 26/05/2008 20:30

    Você é “GRANDE”… Uma dica bem estruturada e útil… bem haja… Pena não existirem mais como você a partilharem algum conhecimento…

    Responder

  14. Guto 28/05/2008 21:46

    Demais o artigo, valeu mesmo! Rápido e prático, acabou com as dúvidas que eu tinha. Já está no s favoritos.

    Responder

  15. Julio Faerman 03/07/2008 18:19

    clear:both salvou minha pele. valeu d+!

    Responder

  16. Henrique 04/07/2008 19:11

    Rapaz… salvou minha pele também, tive o mesmíssimo problema do div pai não acompanhar o conteúdo dos divs com float.
    fiz conforme o exemplo e agora funfa na boa!
    parabéns!

    Responder

  17. Daniel Andrade Cyprestes 20/07/2008 11:47

    Caraca cara valeu mesmo se nao fosse voce eu teria tomado dois tapas na cara que eu apostei eu nem sabia desse display: table; cara serio mesmo valeu ai.

    Responder

  18. marcos felipe 24/07/2008 16:19

    Bom d+ velho =)!

    quando de poe + alguns ae pra nós. by

    Responder

  19. João Gabriel Taig 27/07/2008 14:06

    Muito bom, você devia ganhar um premio procuro na net algo parecido a muito tempo e não achei você sem duvida resolveu todos os meus problemas.

    Mt obrigado.

    Responder

  20. Dirceu 30/07/2008 22:10

    Amigo como faço para alinhar no centro, uma imagem com essa função “float”?

    Obrigado!

    Responder

  21. Alice 15/08/2008 18:00

    Richard,
    Usei a sua dica e funcionou perfeitamente. Obrigada. Você já está no meu “favoritos”.
    Mas gostaria de saber se pode me ajudar um pouco mais….fiz um site com o menu do lado esquerdo e o conteúdo do lado direito se divide em duas colunas. Está lindo no IE 7.0 e no Firefox, mas no IE 6.0 a última coluna da direita fica abaixo da central. Pode me dar alguma dica pra resolver isso? Estou há tempos tentando resolver isso e não consigo.
    Se puder ajudar agradeço.
    Obrigada.

    Responder

  22. Lucrecio 24/08/2008 11:10

    eu não sei na verdade se o meu site e e-mail está em funcionamento porque ainda não enviei qualquer informação no meu site e nã sei enviar no meu proprio

    Responder

  23. Gray 20/09/2008 14:32

    Exatamente o que estava precisando, obrigado

    Responder

  24. cleobes 23/09/2008 14:01

    alguem poderia me ajudar como fazer o preencimento de um espaço que existe no site.
    Pois se eu colocar um background-color, ele pega todo o fundo da prncipal e eu somente queria que ela ficase no nas divs da esquerda e da direita.

    Obrigado

    Responder

  25. Rodrigo 24/09/2008 15:50

    Muito útil! voce salvou minha vida.

    Responder

  26. Thiago Rodrigues 03/11/2008 12:31

    Cara, tu salvou meu dia tbm! Isso me fio de grande ajuda. Muito obrigado msm. Que Deus continue abençoando sua vida para que vc possa continuar abençoando a nos, amadores e profissionais da web.

    Valeu MSM!!!

    Responder

  27. Daniel Façanha 28/11/2008 14:16

    Cara muito Obrigado ja estava ficando louco com essas divs que não alinhavam. Muito obrigado mesmo.

    Abraço.

    Responder

  28. Alexandre Américo Fumes 21/12/2008 13:14

    Eu gostaria de Adicionar mais algumas informações a este ótimo post!

    Utilizando essas técnicas que o Richard Barros passou… Se tiver uma tag dentro do conteudo…
    O design pode se desfazer… Seja com o o conteudo e o menu desalinhados ou então com um espaço no começo e no fim do conteudo…
    Para corrigir isso! Poem no CSS

    p {margin:0;}

    Se ainda não funcionar coloque um ESPAÇO FORÇADO
    Que é “ ” ( sem as aspas ) antes da TAG se necessário coloque outro depois da tag tbm!
    Que corrige o problema…

    Isto pode acontecer também com a tag

    Se verificar na net tem posts falando que isso pode acontecer com outras tags tbm e tem css’s que resetam as propriedades de margin dos elementos… é uma boa nesses casos…
    Abraço… Xande!

    Responder

  29. Alexandre Américo Fumes 21/12/2008 13:25

    HTML não está ativado… é proteção do blog msm…
    Mas de qualquer modo eu coloco com espaços
    “& n b s p ;” (SEM ASPAS E SEM ESPAÇOS ENTRE AS LETRAS!) ISSO é o ESPAÇO FORÇADO!

    Richard Barros… Corrige aew meu coment plz!

    Responder

  30. keven 06/01/2009 10:32

    vale fera!!!

    Responder

  31. Guille 08/01/2009 18:32

    muito bom estou começando a estudar CSS, a dica do clear: both; é melhor pra esse caso, vlw pelas dicas ein… abraço.. e sucesso!

    Responder

  32. Douglas 18/01/2009 15:23

    Cara muito bom, obrigado, agora consegui entender a propriedade float.
    abraços!

    Responder

  33. Adriel 13/02/2009 11:28

    Olá, agradeço seu post. Leigo no assunto, acabei por descobrir que o meu problema de alinhamento entre as duas sidebars do meu blog se encaixa no item 2: Float:right não alinha com o Float:left.

    Eu só tenho esse problema no IE 6, dentre os outros browsers: Opera, FF, Chrome e versões superiores ao IE 7 na qual testei. Penso em consertar isso no IE 6 porque meus visitantes que usam essa versão do navegador representa pouco mais de 30%, no entanto, seguindo sua diga de retirar o elemento “Float” de uma das sidebar e usando o “margin-left”, também não obtive resultados, a sidebar 1, da esquerda, insiste em ficar abaixo da sidebar 2.

    Basicamente, o espaço reservado no laytout as duas sidebar está assim no CSS:

    “/* Side */
    .SR { width: 350px; float: right; position: relative; padding: 0px; }”

    Aí vem as configs da:
    Sidebar 2 (direita):
    “/* Side Right*/
    .SRL { width: 170px; float: right; position: relative;}”

    Sidebar 1 (esquerda):
    “/* Side Left*/
    .SRR { width: 130px; float: left; padding: 0px 0px 0px 0px;}”

    Isso no modo padrão, antes de usar o elemento “margin-left” que também não deu certo. Você teria alguma sugestão a mais?

    De qualquer forma já agradeço pelo seu post sobre o elemento “float” ;)

    Responder

  34. Gabriel 24/02/2009 11:50

    Meu to aprendendo agora webdesigner e isso foi uma “mão na luva” era exatamente o que tava me prendendo…valew, ótimo post, e realmente funciona.

    Responder

  35. Rafael Santana 18/03/2009 16:12

    Muito obrigado pela dica! Me foi MUITO útil.

    Abraços

    Responder

  36. Neu 29/06/2009 20:13

    Parabéns
    meuito bom ;D
    como vc disse, “macetes que você não encontrará em nenhum site de referência CSS.” .

    Abraço

    Responder

  37. Jefferson 29/07/2009 23:19

    Cara, interessante vc falar do assunto, mas o floate left no menu e rigth no conteudo funciona sim. Mas vc tem que definir bem o tamanho das duas divs, caso contrário uma vai tero deslocamento indesejável. Embora somente o float left já resolva o problema.

    Flw!

    Responder

  38. Michael DOni 11/09/2009 16:08

    Muito bom… mas faltou umas coisinhas que ajudam quando se está mexendo com float… usar um clearboth depois de terminar uma “LINHA” de divs ou de estágio do site é sempre bom, pois isto limpa o que foi feito anteriormente, e algumas vezes usando o clear:both alguns navegadores entendem de mandeira errada criando espaços etc… tem que formatar tudo mesmo assim…

    Mas o tutorial é show eim
    da uma ajuda boa =D

    Responder

  39. Fernando Schuindt 19/09/2009 09:51

    Puts cara! Muito bom!
    Afinal o float era uma faca de dois gumes :D

    Muito obrigado!

    OBS: Ganhou um feed reader :)

    Responder

  40. Ha. 30/10/2009 09:13

    Para ficar mais padronizado e arrancar esse hack chato da clear… não acha legal colocar um float na div=”tudo” (prefiro main exemplo) e no body, se poem margin:auto; pra ficar centralizado ??? se puder dar a opinião, favor!!! eu uso desse modo.

    Responder

  41. DIEGO 05/11/2009 12:53

    Cara,
    este seu tutorial é perfeito!
    simples o objetivo!
    eu trabalho muito com float e nunca encontrei algo que solucionasse meu problema com estes floats

    Valeu Cara
    Obrigado

    Quanto ao POST do Adriel
    você já tentou colocar os div .menu .conteudo como display inline
    ja resolví alguns problemas desta forma
    até Mais

    Responder

  42. Maico 17/11/2009 09:39

    Valeu mesmo cara!! Me ajudou muito hoje!

    Responder

  43. Wellington 03/12/2009 11:26

    Ótimo post, bem explicativo.

    A primeira coisa que tentei fazer foi um float left em uma div e float right em outra, não ia alinhar nunca rsrs.

    Responder

  44. Klício Silva 03/01/2010 21:25

    Muito boas as dicas publicadas aqui friend!
    Estou com 8 meses estudando webdesign e ainda encontro muitas dúvidas o que é normal, mas o importante é que eu gosto do assunto e não vou desistir.
    Estou projetando o meu site o com certeza essas dicas vão ajudar bastante, já te add aos meus favoritos ae ;)

    Tive uma dúvida em relação ao html, como eu faço para incorporar o estilo, terei que incrementar com método de link juntado ao css?
    Se puder responder eu agradeço.

    Responder

  45. Alessandro 04/03/2010 04:22

    Que essa página dure para todo sempre !

    EXTRAORDINÁRIO !

    O assunto discutido “Float” do CSS é de grande dificuldade no entendimento, mais nesse post parecia que estava-mos lendo o tuto com grande facilidade !

    Chamamos isso de Professor ou “Mestre”.

    Parabéns e Sucesso!

    Responder

  46. Vitor Melo 05/03/2010 09:07

    Uma técnica que costumo utilizar é a usar o atributo: overflow: auto; na div de conteúdo, sendo assim, ela automaticamente irá englobar as outras.

    Responder

  47. Gustavo Willer 24/04/2010 18:08

    Este float tava dando mta dor de cabeça rsrs.. fiz umas gambiarra utilizando float nas outras divs
    e resolveu …

    mas depois de ler esse post agora é so alegria

    Excelente tutorial
    Sucesso com o blog

    Responder

  48. Fabiano 30/04/2010 00:43

    não tem noção de quantas pessoas já ajudou.

    devia receber um premio.

    Responder

  49. Marcos 12/06/2010 13:27

    Cara gostei das dicas. Eu estou comessando agora com o tabless e tenho tomado muito cora mais acho que agora fou conseguir resouver um pouco dos meus problema vale!..

    Responder

  50. wake 16/06/2010 19:59

    Cara muito bom esse tutorial, me ajudou muito, eu tava quase jogando o pc no chão de tanta raiva, eu nunca iria conseguir alinhar duas divs, valew mesmo.!

    Responder

  51. Camila 31/07/2010 18:51

    Me poupou algumas horas de cabelo branco! rsrs

    Responder

  52. Adolfox 07/08/2010 16:23

    Pelo que verifiquei na web, a opção table está disponível para IE somente a partir da versão 8. Porém, para que funcione a partir da versão 6, basta habilitar o strict mode em seu documento (X)HTML através do doctype switching.

    Eu obtive bons resultados em meus testes tanto no IE6+ e FF.

    Espero que a dica possa ajudar alguém.

    Responder

  53. Kelinha 31/08/2010 10:11

    Nossa =D
    Adoooorei..me salvou…

    Obrigada, otima as dicas *-*

    Bjuxxx

    Responder

  54. nox 08/09/2010 13:09

    Salve, salve Richard!
    Dicas usadas com sucesso, e blog adicionado aos favoritos.

    Valeu,
    []´z
    Nox.

    Responder

  55. Marcio 09/09/2010 19:47

    Oi Richard,

    Cara, seu post foi demais! Me deu a maior força, caiu como uma luva no que eu tava precisando resolver.

    Um abraço!

    Responder

  56. Luan Ramos 24/09/2010 10:13

    Muito bom esse ‘display: table;’ não o conhecia,

    eu usava no lugar do ‘display: table’ um ‘overflow: hidden;’.

    Abraço.

    Responder

  57. Marcos Paulo 01/10/2010 17:50

    O ‘display: table;’ não funcionou pra mim aqui

    Eu fiz funcionar criando uma div com ‘clear: both;’ abaixo das divs “menu” e “conteudo” mas ainda dentro da div “tudo”

    Um abraço!

    Responder

  58. Weber 07/10/2010 10:43

    Venho utilizando o display:table e é uma propriedade excelente. Ajuda bastante.

    Belo post!

    Responder

  59. alan 02/11/2010 10:00

    valeu esta precisando dessa propriedade para alinhar uns anuncios do adsense!!

    Responder

  60. Flavio Paiva B. Harder 12/11/2010 21:48

    Puxa, passei muito tempo sem saber o que fazer nesses casos. Isso que dá a gente relaxar no estudo dos atributos CSS menos usados. Obrigado por acaber com meu sofrimento.

    Responder

  61. Vinicius 18/11/2010 16:03

    Olá, Hello, please, por favor, qual component Joomla você utilizou para este formulário? Joomla component which you used for this form? Qual Nome? What Name? Obrigado!! Thanks!!

    Vini_vendramel@hotmail.com

    Responder

  62. Eduardo 01/12/2010 22:46

    Valeu Richard, salvou minha pele, tava quase destruindo tudo. Obrigado.

    Responder

  63. GB 02/12/2010 16:31

    Santo Google. E santa dica. Valeu!

    Responder

  64. paineis de senha 16/12/2010 01:01

    muito boa esplicaçoes deu pra entender tudo, parabens agora da para fazer certinho as divis.
    Cesar

    Responder

  65. ZBlac 16/12/2010 18:51

    Amigo … Valeu mesmo,
    Feliz 2011 … tudo de bom…

    Responder

  66. Luiz 28/12/2010 01:05

    Cara vlw ae….isso me salvou xD

    Parabéns pelo site!

    Responder

  67. Allan 17/01/2011 09:29

    Foi muito útil sua explicação, mas no meu caso, tenho um formulário onde um campo fica ao lado do outro (float:left;) e quando não quero que o campo inicie ao lado do outro, uso o (clear:right;) para o campo iniciar na próxima linha. No mozilla funciona que é uma beleza, mas no IE a ordem dos campos fica completamente louca… tem alguma sugestão ?

    Muito grato!
    Allan

    Responder

  68. Deivid Filipe 22/01/2011 13:53

    Eu não uso nem o display: table, nem o Clear:both eu uso

    overflow:auto

    Responder

  69. Renato 31/01/2011 08:31

    Isso so da certo se colocar um height da div conteudo.
    Caso contrario nao da certo!

    Responder

  70. Danilo 01/02/2011 18:04

    Alguém pode me tirar esta dúvida: Quero fazer uma sombra ao redor de toda uma div, como a desse site, o corpo.

    Valeu.

    Responder

  71. Diego 03/03/2011 00:57

    cara valeuuuuuuuuuuuu!!!
    me resolveu um surper problema.

    Responder

  72. Rodrigo 09/04/2011 11:30

    Vlw… obrigado!!!

    Responder

  73. Adelson 13/04/2011 00:59

    Vlw cara Muito boa essa dica e bem explicada vle mesmo tava quebrando a kbeça aqui muito obrigado

    Responder

  74. Alguém 23/04/2011 21:26

    Cara mesmo depois de muito tempo, ajudou-me muito!
    Valeu cara!

    Responder

  75. Ciencia 25/04/2011 12:32

    Muito bom resolvi um problemao que na veradade era muito facil de resolver, e que tinha se tornado um tabu!!!
    Exelente Site gostei…
    T+

    Responder

  76. Bruno 05/05/2011 00:35

    Eu uso overflow:hidden na div que engloba, assim ele força a altura dela de acordo com o conteúdo.

    Responder

  77. Guigo 24/08/2011 10:32

    Sem gambiarra gente. Atribua as divs de dnetro display:inline-table e pronto, a div mae crescerá junto, abs.

    Responder

  78. Takaite 24/08/2011 23:12

    Kara, vlw pelas dicas! Estou a 2 horas aqui brigando com as divs, css e float!

    Responder

  79. Adriano Luz 08/09/2011 10:58

    VOCÊ É ‘O CARA’

    vlw!

    Responder

  80. Iago Bernardes 15/09/2011 21:43

    Kra… vc é fera mesmo…
    por causa desse “display:table” eu tava rachando a kuka… e nada dava certo..
    vlw mesmo

    Responder

  81. Fernando 20/09/2011 10:23

    Caraca, um tutô feito em 2007 e ainda salva vidas até hoje
    (a minha por exemplo kkkkkk)
    vlw msm mano se ainda vc estiver por ai =D

    Responder

  82. Daniel Tokarski 25/09/2011 12:46

    Muito bom!!!

    Salvo minha vida esse display table!!!!!!!!!!!

    Responder

  83. Clã Celestial Blog 31/10/2011 01:03

    Creio que ao dar display table ele se comporte como uma tabela, perdendo as vantagens de ser uma div.

    Ou seja seria melhor usar uma tabela logo.

    Responder

    roger Reply:

    Cara a Div possui muitas formas, por isso existe o “display” do css, a grande vantagem das divs sobre as tabelas é poder herdar essas propriedades do css, então as vezes vc vai kerer usar algo semalhante a uma tabela(na questão de posicionamentos e enquadramentos), então vc poderia usar divs com displays: table, table-cell ou table-row, pode confiar seu site vai ficar muito mais limpo no código e com o funcionamento esperado.

  84. Weber 04/11/2011 08:41

    Rapaz, muito obrigado! Me salvou, assim como a muita gente que ja publicou comentarios aqui.
    Abracos!

    Responder

  85. Carlos Gomes 05/11/2011 11:03

    Parabéns pelo excelente post!
    Eu estava procurando a dias para resolver esse problema, esse display table é excelente.
    Abraços

    Responder

  86. Kerollen 22/11/2011 14:38

    Richard,
    Muito obrigada, foi muito util, estava quebrando a cabeça já com isso…\o

    Responder

  87. Maicon 30/11/2011 09:03

    Parabéns, foi muito útil pra mim esse tutorial!

    vlw

    Responder

  88. Matheus 21/12/2011 17:59

    Funcionou perfeito. Era isso mesmo que eu precisava.
    Obrigado

    Responder

  89. Cristiano 26/12/2011 11:51

    Parabéns Richard, seu artigo é curto e bem esclarecedor.

    Responder

  90. Jonathas 27/12/2011 13:52

    Ótima dica, desde 2007 ajudando desenvolvedores com os problemas gerados pelo float.

    Muito Obrigado =)

    Responder

  91. Bruno 26/01/2012 13:53

    Olha to aprendendo um pouco de html e css mais na hora que eu fiz o menu ele fico com uma margin left que nao sai por nada ai o menu fica com espaçamento oque pode ser!#menu ul li{
    float: left;
    display:inline;
    padding:16px 0px;
    margin:0;
    }

    #menu ul li a{
    font:17px Arial, Helvetica, sans-serif;
    color:#FFF;
    padding:15px 15px;
    text-decoration:none;
    text-transform:capitalize;
    border-right:1px solid #fff;

    }

    Responder

  92. Marcos 27/01/2012 13:05

    Porra cara me salvo a pele legal agora com esse display:table; valeu!!!!!

    Responder

  93. Tekateh 27/02/2012 02:35

    Nossa muito obrigada *-* foi MUITO útil =D
    com toda certeza quando meu novo layout estiver pronto irei colocar um link direto para seu site *-*
    Beijos

    Responder

  94. Tânia 28/02/2012 17:48

    Digo que foi um site ABENÇOADO… só pode… Já estava ficando biruta e quase desistindo… Muuito obrigada!

    Responder

  95. Giovane 10/03/2012 20:24

    Esse valeu eu comentar e dar um Joinha :D
    Muito bom cara!!
    Obrigado por tudo :D

    Responder

  96. Rebeca 13/03/2012 01:10

    Incrível! Resolveu o meu problema, valeu =)

    Responder

  97. Fernando 17/04/2012 10:53

    Não gostei.
    Você acabou alterando a marcação, deixando ela menos semântica e criando uma dependência da mesma com o CSS. Além disso, existem formas melhores de solucionar esse tipo de problema.

    Responder

    Luan Reply:

    Olha fernando eu tentei de diversos modos e nunca encotrei forma melhor de resolver esses problemas, mas se você conhece outro, compartilhe conosco.

  98. John 01/05/2012 21:39

    Você é uma mãe! =]

    Responder

  99. Jhonatas 09/05/2012 18:33

    Cara vc me salvou mesmo tem muito tempo que eu venho quebrando acabeça com isso nunca achei nada que falasse disso \o/\o/\o/\o/!!
    vc é o cara

    Responder

  100. da 14/05/2012 20:46

    é mais simples usar overflow no tudo

    overflow: auto;
    width: 100%

    Responder

  101. ailson 16/05/2012 22:21

    Cara estou fazendo um site gerenciavel, e trabalhando com muito float, esse POSTE me ajudou e muito vlw!!!

    Responder

  102. Renato 22/05/2012 09:40

    Muito bom o post, facilitando a vida de vários programadores iniciantes e também de alguns programadores mais experientes. Parabéns!

    Responder

  103. Marcos Xavier 01/06/2012 16:18

    Muito bom o texto cara.Parabéns.

    Responder

  104. jjdomroam 14/06/2012 00:38

    Amigo muito obrigado pelo posto!
    Estava quebrando a cabeça faz tempo com isso ! ja tinha arrumando uma gambiara para resolver, mas aqui no seu post realmente entendi a coerencia dos floats e pq usar os ( Clear ) .

    valeu kara !

    Responder

  105. Breno 01/07/2012 10:05

    Meu conteudo da div que quero posicionar no codigo fica abaixo do conteudo da div que tem que ficar do lado se e que voce me entende o que eu faço ??

    Responder

  106. Alan Clesio 13/07/2012 10:41

    Muito boa a dica. Com certeza ajudou a muita gente! Parabéns, cara!

    Responder

  107. Lia 19/07/2012 14:42

    Nossa…. vc viaja demais nas divs!! rsrsrs

    Responder

  108. Walter Vinicius 27/09/2012 17:41

    Cara muito Obrigado me ajudou bastante vc tem mesmo rasão ninguém te ensina estes truques…

    Obrigado…

    Responder

  109. Dionatan 04/10/2012 16:42

    Muito bom! E ainda tu prova utilizando no próprio CSS do teu site! ;)

    Responder

  110. Marcus 18/10/2012 22:26

    no caso se eu quiser alinhar uma imagem no canto inferior direito como eu faço?

    Responder

  111. Tiago 31/10/2012 08:58

    Baaaahhhhh. Muito Obrigado. Salvaste meu dia.

    Responder

  112. Anísio 08/11/2012 14:37

    Valeu cara me ajudou muito!!! Obrigado, ótimo post!

    Responder

  113. Paulinhoerry 10/11/2012 02:51

    Pela primeira vez aprendi a propriedade float de verdade, parabéns cara, excelente post, muito bem explicado.

    Responder

  114. Bruno 14/11/2012 13:21

    Valeu mesmo amigo estava já me matando tentando achar o erro e era este bendito clear que salvou tudo! Muito Obrigado, Waleu!

    Responder

  115. cezinha 30/11/2012 13:56

    Pode usar a propriedade overflow:hidden ao invés de usar display:table

    Responder

  116. Bernardo 29/12/2012 13:22

    São esses problemas com float que quase ninguém aborda. Boas dicas :D

    Responder

  117. Aderson 31/01/2013 15:58

    Olá brother, estou com problemas sempre utilizei esse código:

    #Tudo {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:1;
    }

    e vi que você só usa:

    .tudo { display: table; }
    .menu { float: left; width: 30%; }
    .conteudo { margin-left: 35%; }

    ira da algum erro se eu ultiliza assim :

    #Tudo {
    position:absolute;
    display:table;
    clear:both;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:1;
    }

    Fico grato!!!

    Responder

  118. Julian 01/02/2013 13:13

    Up! Valew , me ajudo bastante :)

    Responder

  119. Iago Sousa 02/02/2013 12:04

    Com o novo CSS eu utilizo uma maneira mais “fácil”.

    No caso do seu exemplo seria algo como:

    .tudo:after {
    clear: both;
    }

    Não precisa adicionar uma div vazia (hack).

    =]

    Responder

  120. Everton 27/02/2013 22:49

    Adicionando para os favoritos (:

    Responder

  121. André 20/03/2013 14:21

    Muito bom mesmo!! A anos que tinha essa dúvida! Show de Bola. valeu

    Responder

  122. Ivan 21/03/2013 23:25

    Cara vlw msm salvou minha vida agora, ja nao aguentava mais quebra a cabeça para achar um jeito de resolver esse problema

    Responder

  123. Marcos Barbosa 03/06/2013 16:14

    Muito bom seu artigo Richard. Esse problema da div geral não acompanhar era um problema que ainda não tinha resolvido. Muito obrigado. Parabéns pelo trabalho!

    Responder

  124. Neto 11/06/2013 19:38

    Poxa era realmente o que eu precisava muito obrigado.

    Responder

  125. Pedro 16/07/2013 14:27

    Melhor tutorial. Salvou a minha vida! Muito obrigado! :D

    Responder

  126. Gilberto 14/08/2013 13:51

    Thanksssss!!!!!!!!

    Responder

  127. Thiago 28/08/2013 13:27

    Eu ja conhecia esse comando, mas esse blog me fez relembra tudo, obrigado.
    DTA

    Responder

  128. Alex 26/09/2013 23:07

    nuss e pensar que eu fiquei 3 horas tentando resolver!!!
    Muito bom !!
    Obrigado pela ajuda!

    Responder

  129. Mário Costa 14/10/2013 17:34

    Cara obrigado por essas dicas, eu estava usando ja o hack clearfix, entretanto estava com problema com o que a div abrigava e esse tutorial me ajudou bastante com o isso.

    Responder

  130. Cassiano 25/10/2013 13:29

    Cara. Já estava irritado com estas divs. Você salvou o meu monitor de levar um soco (rsrsrs)
    Obrigado

    Responder

  131. Richard 18/11/2013 20:08

    O melhor tutorial que encontrei.. consegui finalmente alinhar os códigos direita e esquerda. Valew

    Responder

  132. FabiorSodré 13/12/2013 14:48

    Maravilha! Muito bem analisado, parabéns!

    Responder

  133. FábiorSodré 14/12/2013 10:12

    Não deu certo no firefox, porém obtive o mesmo efeito com display:block;
    Post excelente, parabéns!

    Responder

  134. Fernando 16/01/2014 08:30

    Excelentes dicas, obrigado por compartilhar. Abraço.

    Responder

  135. Rei 20/01/2014 07:59

    Tmbem n conhecia display:table. valeu!

    Responder

  136. Leonardo 17/02/2014 17:53

    Muito bom seu conteuto, só tenho uma duvida, quero colocar o 3º div do lado, mas não estou conseguindo, isso e possivel? vc pode me ajudar?

    Responder

  137. Cofres 18/02/2014 17:08

    Como faço para que ele ajusta na pagina toda o qual é o código ?

    Responder

  138. Fábio 09/04/2014 16:01

    Alguém sabe se é possível usar com sobreposição de imagens no outlook 2010 ?

    Obrigado.

    Responder

  139. Fábio 09/04/2014 16:09

    Postando novamente, a tag que eu tinha colocado não foi.
    ____________________________-
    Alguém sabe se é possível usar DIV com sobreposição de imagens no Outlook 2010 ?

    Responder

  140. Wagner 04/06/2014 22:47

    Não funcionou no Firefox 29.0.1, achei que ia dar certo, mas não deu :(

    Responder

  141. Wagner 06/06/2014 23:29

    Quero me desculpar por meu comentário anterior dizendo que não havia funcionado no Firefox 29.0.1, o problema é que meu servidor não estava atualizando, então depois de ter reiniciado a máquina funcionou sim, valeu amigo.

    Responder

  142. Edivaldo 27/06/2014 20:32

    Tenho um site com um tema que a barra lateral está do lado direito e queria mudá-la para o lado esquerdo. No CSS do tema a parte que cuida disso está assim:
    .content-area {
    width: 100%;
    float: left;
    }
    .site-content {
    margin: 0 340px 0 0;
    }
    .site-sidebar {
    width: 300px;
    float: left;
    margin: 0 0 0 -300px;
    }
    Sempre que tento mudar fica um conteúdo atrás do outro. Como devo modificar isso?
    Desde já, agradeço sua ajuda.

    Responder

  143. Samuel Castro 02/07/2014 11:22

    Bom dia Richard.
    estou com um danado de um problema tão simples mas acho que por falta de conhecimento eu estou em duvida.

    Estou criando em HTML/CSS uma pagina e o problema está relacionado a POSICIONAMENTO.
    Ja li diversos sites e ninguém ajuda apesar da grande explicação que me passam.

    Quero que uma <div id="Ex-Direita" não se alinhe com a
    mas quando eu jogo o CLEAR:BOTH ou CLEAR:RIGHT a continua alinhada e não é empurrada para baixo.

    Esquerda {
    clear:both;
    float:left;
    margin-left:20px;
    position:relative;
    border:2px solid red;}

    Direita {
    float:right;
    background-color:green;
    color:white;}

    Preciso que me explique de um jeito que não seja muito formal para melhor entendimento. abraço!

    Responder

  144. Samuel Castro 02/07/2014 11:27

    CORREÇÃO DO COMENTARIO !!!!

    Bom dia Richard.
    estou com um danado de um problema tão simples mas acho que por falta de conhecimento eu estou em duvida.

    Estou criando em HTML/CSS uma pagina e o problema está relacionado a POSICIONAMENTO.
    Ja li diversos sites e ninguém ajuda apesar da grande explicação que me passam.

    Quero que uma <div id="Ex-Direita" não se alinhe com a <div id="Ex-Esquerda"
    mas quando eu jogo o CLEAR:BOTH ou CLEAR:RIGHT a <div id="Ex-direita" continua alinhada e não é empurrada para baixo.

    Esquerda {
    clear:both;
    float:left;
    margin-left:20px;
    position:relative;
    border:2px solid red;}

    Direita {
    float:right;
    background-color:green;
    color:white;}

    Preciso que me explique de um jeito que não seja muito formal para melhor entendimento. abraço!

    Responder

  145. Pingback: Site | Cyb3rmancer
  146. Fagner Lima 22/07/2014 15:44

    Sensacional a dica do “display: table;”. Eu sabia do macete de adicionar uma div com “clear: both;”, mas essa outra dica é muito mais direta.

    Responder

  147. Cristy 28/09/2014 00:00

    Consegui fazer isso com dois Fieldset, porem, como ficaria o css para alinhar 3 tres fieldset lado a lado?

    Responder

  148. Cristy 28/09/2014 00:02

    Consegui fazer isso com dois Fieldset, porem, como ficaria o css para alinhar 3 tres fieldset lado a lado? Quando eu tento com o terceiro fieldset ele não alinha automaticamente, Tira esta Duvida Por favor.

    Responder

  149. Diogo Dias 15/10/2014 11:41

    Muito massa! ocorreu tudo certo.

    Responder

  150. David 15/11/2014 06:46

    No meu caso mesmo colocando a parte do margin ela ainda fica uma linha abaixo em vez de ficar no lado

    Responder

  151. Matheus 14/01/2015 01:17

    Cara….. Conseguisse resolver o meu problema (e dessa galera toda aí em cima) da forma mais simples e bem explicada que eu vi na internet.
    Parabéns! (já salvei teu site aqui e vou ler ele todo, com certeza vai valer a pena)

    abraços! :)

    Responder

  152. Michael 05/03/2015 00:14

    Cara muito obrigado por isso, uma coisa tão simples de resolver e me deu tanto problemas em anos, faz muito tempo que faço sites e esse era meu principal problema, sempre resolvia definindo um height para a div “tudo” no caso e esse display: table salvou…

    Responder

  153. Tiago 07/04/2015 20:18

    Obrigado, estava quase ficando careca de tanta raiva :)

    Responder

  154. Neyelson 16/04/2015 10:09

    MEU AMIGO, MUITO OBRIGADO, VOCÊ SALVOU MEU DIA COM ESSE DISPLAY TABLE

    Responder

  155. Wendel 23/10/2015 17:09

    Vlw cara. Salvou o dia. Estava quebrando a cabeça pra tornar meu site responsivo e essa dica salvou meu dia.

    Responder

  156. Gil Marinho 06/11/2015 15:03

    Fala aí Richard Barros, Homem Máquina, tudo bem?

    Suas dicas de CSS sempre salvando as pessoas no dia a dia do Web Design, inclusive a minha.
    Muito obrigado cara e continue contribuindo com a comunidade.

    Um abraço do Gil Marinho.

    Responder

  157. Isis 28/12/2015 15:04

    Gostei daqui. O fisioterapeuta mostrou um travesseiro magnético mas reforçou que não pode ser muito rígido. Quem daqui já teve esse travesseiro da Colchão Inteligente que apareceu na globo? http://travesseiro-nasa-magnetico.com.br

    Responder

  158. Ramna 28/12/2015 15:24

    Gostei das matérias. Estou precisando de um travesseiro terapêutico mas reforçou que não pode ser muito firme. Quem daqui já usou esse travesseiro da Colchão Inteligente que apareceu na globo? http://travesseiro-nasa-magnetico.com.br

    Responder

  159. Weslen 04/02/2016 08:59

    Vlw cara!

    Estava com algumas dúvidas terríveis e seus exemplos me esclareceram muita coisa.

    Responder

  160. Cristiano P Maldonado 22/03/2016 11:28

    Ajudou a resolveu um probleme de lay-out em um site.

    Valeu!!!!!

    Responder

  161. Lucas Melo 31/03/2016 16:28

    Parabéns pelo post, simples, com exemplos diretos e muito bem explicado. Me salvou haha’
    Sucesso, abraço!

    Responder

  162. Eduardo Tell 17/06/2016 09:08

    Se vocês não conseguirem…deem uma olhada na propriedade clear, com por exemplo tinha uma classe com a propriedade “clear:both”, por isso não dava certo ;)

    Responder

  163. Carolina santos 13/07/2016 14:08

    Obrigada! Salvou meu TCC.

    Responder

  164. Rodrigo B 17/07/2016 10:02

    Estou tendo muitas dificuldades, para fazer com que a div menu lateral esquerdo div, acompanhe o height da div . Já que esta última tem conteúdo dinâmico , diferente da primeira. Alguma sugestão?

    Responder

  165. Guido Fawkes 10/08/2016 11:35

    Holy carajo, amigo! Você realmente me ajudou, eu não sabia que o float:left e o float:right não se alinhavam, fiquei quase uma hora tentando ajustar e não conseguia, valeu mesmo!

    Responder

  166. Sirlene Duarte 14/08/2016 15:07

    Esse tutorial é salvador! Muito bom você ter compartilhado com a gente :)

    Responder

  167. Randys 02/10/2016 19:25

    Olá estou com um problema na propriedade float, tem um espaço entre os posts que não consigo resolver, alguém poderia me ajudar.
    Segue a imagem.
    https://2.bp.blogspot.com/-0rnK-AW3CIk/V_GI6IkOkUI/AAAAAAAAJlg/yPRrssTVcvcY8AptFcNr2zzkh5Ki0DyzQCLcB/s1600/site.jpg

    Meu CSS:
    .post {
    background: #fff none repeat scroll 0 0;
    color: #454545;
    float: left;
    height: 100%;
    line-height: 1.6em;
    margin-bottom: 25px;
    margin-right: 25px;
    overflow: auto;
    padding: 15px;
    width: 440px;
    }

    Responder

  168. paulo 13/03/2017 09:52

    PArabéns, ainda não tinha visto alguém com tanta paciência e até “DESENHAR”, para explicar esse filho do capiroto kkkkkkkkkkkkkkkkkk

    Responder

  169. lucas 23/04/2017 23:42

    Valeu, cara me ajudou muito!! Me popou muitas horas. kkkkk
    Muito Obrigado!

    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=""> <strike> <strong>