Como evitar que os "Left Floats" quebrem

Escrito por vail joy | Traduzido por marilia babberg catapano
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como evitar que os "Left Floats" quebrem
Definindo a propriedade float do CSS e suas propriedades associadas "clear" ou "margin", controle o comportamento de seus elementos (website layout image by 6922Designer from Fotolia.com)

Ao contrário do seu homólogo HTML, o CSS é uma linguagem utilizada por designers para criar a aparência visual de uma página da web. "Float" é uma propriedade dentro do CSS que define como os elementos são posicionados em seu layout e é normalmente usado dentro de uma etiqueta "div". Por exemplo, você pode usar "float: left" para criar uma lista de links que aparecem ao lado da área do conteúdo de texto principal em um layout de duas colunas. Como a propriedade "float" atribui um elemento para o fluxo do conteúdo, é comum o conteúdo mais à direita "quebrar" ou ir para baixo do primeiro, se outras propriedades dentro do elemento não estiverem configurados corretamente.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Verifique se a sua "ID" ou sua "class" no arquivo CSS estão com a propriedade "clear". Esta propriedade vai obrigar o elemento a ir para baixo dos elementos acima dela. Se você não deseja que o elemento "quebre" , "clear" deve ser removida. Um exemplo de como isso deverá ficar segue abaixo:

    element1 {

    clear: both; float: left; }

  2. 2

    Verifique se ambos os elementos destinados a ficarem próximos um do outro têm a mesma propriedade "float". Em um layout de duas colunas, ambos os elementos utilizados para criar colunas de conteúdo devem ter a propriedade "float: left;"

    element1 {

    float: left; }

    element2 {

    float: left; }

  3. 3

    Coloque ambos os elementos "float" dentro de uma div "container" que possui a menor largura definida ou que seja maior do que a soma total dos elementos "float" e qualquer "padding" ou "margin". Se os "floats" definidos para uma largura específica não têm espaço suficiente para ficar ao lado de um outro, o "float" do lado direito será empurrado para baixo.

    CSS:

    container { min-width:100px; width: auto !important; width: 100px; }

    element1 {

    float: left; padding: 10px; width: 210px; }

    element2 {

    float: left; padding:10px; margin-right: 20px; width: 580px; } HTML: <div id="container"> <div id="element1"></div> <div id="element2"></div>

  4. 4

    Verifique se o conteúdo de seus "floats" não são maiores do que os próprios elementos ou o espaço. O conteúdo deve caber dentro de seu elemento para evitar ser empurrado para baixo ou "quebrado". Por exemplo, se o espaço para o conteúdo da sua coluna da direita é de apenas 580 pixels e há um "padding" de 10 pixels e 20 pixels de "right-margin", qualquer elemento subordinado, ou imagem, não pode ser superior a 540 pixels de largura.

  5. 5

    Tente usar a propriedade "display: block;" se os elementos continuam a "quebrar" e você tem certeza que o conteúdo não é o problema. Isso faz com que o elemento seja tratado como um todo e é o mais eficaz em elementos de texto, tais como links de navegação.

  6. 6

    Adicione "display: inline" para "floats" que tem uma configuração de "margin". O Internet Explorer irá dobrar quaisquer margens definidas na mesma direção que o "float", fazendo com que "quebre".

Dicas & Advertências

  • Adicione "clear: both;" para o "ID" ou "class" para forçar um elemento a "quebrar" abaixo de elementos "float", como uma "div" rodapé.
  • Use a propriedade "cross-browser" de contagem de colunas compatíveis quando estiver trabalhando com textos ao invés de elementos individuais. Por exemplo:
  • .three-columns {
  • -moz-column-count: 3;
  • -moz-column-gap: 50px;
  • -webkit-column-count: 3;
  • -webkit-column-gap: 50px;
  • }
  • Use "bottom-padding" em elementos "float" primários ao invés de "bottom-margin" se você pretende colocar mais elementos dentro deles.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível