0

Estou desenvolvendo este site:

http://conscienciaestelar.filosofiaesoterica.com.br

E estou encontrando problemas com o posicionamento do footer. Estou utilizando twitter bootstrap(apenas o grid) e o SASS como ferramentas.

Se vocês abrirem o site, verão que o footer está posicionado acima do container de artigos, e seus elementos estão no local correto(abaixo dele). Até coloquei as bordas do footer pretas para que possam visualizar o problema.

Se inspecionarem os elementos header, footer e section, poderão ver que os limites das linhas do inspetor só vão até o início do container de artigo. É muito estranho, afinal, aninhei o html perfeitamente dentro das mencionadas tags. O que pode estar acontecendo?

1 Resposta 1

1

Adicione uma <div style="clear: both;"></div> no final da <div class="row content-index">.

Isso vai "limpar" os floats das divs dos artigos.

Se quiser saber mais sobre isso, aqui vai um artigo (em inglês): http://css-tricks.com/all-about-floats.

Outra coisa, não relacionada a pergunta: dá uma revisada na fonte do site; em alguns lugares ela é pouco legível.

2
  • Mas cara, você saberia me explicar o porquê da inconsistência no meu layout? Sempre usei o grid do bootstrap e nunca tinha acontecido isso. Sua solução funcionou... Mas só consigo estilizar o footer se definir o position como absolute (o que nunca foi necessário com bootstrap). Estou achando isso muito estranho. 10/06/2014 às 11:29
  • O clear:both serve para 'delimitar' os elementos flutuantes, criando assim uma base para seu footer se posicionar. Quando utilizamos o float em um elemento, os próximos elementos não conseguem entender onde começa e nem onde termina o float, a não ser que também possua um float. Não sei se deu pra entender. hehe 13/06/2014 às 12:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .