Sidebar abaixo do conteúdo no WordPress: como corrigir

Tipo Outros erros

Nome do erro Barra lateral abaixo do conteúdo EN: Sidebar below content

Severidade Informativo

Descrição A sidebar abaixo do conteúdo no WordPress acontece quando o float quebra, a soma das larguras das colunas passa de 100% ou uma tag HTML ficou aberta. A correção é fechar o HTML, ajustar as larguras e aplicar clear para a barra lateral voltar ao lado do conteúdo.

O que é a barra lateral que cai abaixo do conteúdo?

Barra lateral abaixo do conteúdo é o defeito de layout em que a sidebar, que deveria ficar ao lado do texto, aparece empurrada para baixo da última linha do conteúdo, ocupando a largura toda. No WordPress isso é quase sempre um problema de CSS: o container do conteúdo e o da sidebar usam float ou colunas, mas a soma das larguras estoura os 100% disponíveis, ou um elemento não recebeu clear, e o navegador joga a coluna que não cabe para a linha de baixo.

Como identificar

A barra lateral aparece embaixo de todo o conteúdo do post, ocupando a largura inteira, em vez de ficar à direita.
O problema só acontece em algumas páginas (geralmente posts longos ou com tabelas e imagens largas) e não em outras.
Ao inspecionar o elemento (F12), o container do conteúdo mostra um width somado com a sidebar maior que 100%.
No editor, uma tag como uma div ou figure aparece sem o fechamento correspondente, deixando o HTML aberto.

Antes de começar: Edite o CSS sempre pelo Personalizar ou por um tema filho, nunca direto no style.css do tema pai, pois a próxima atualização do tema sobrescreve a alteração e o layout quebra de novo.

Como prevenir

Use sempre box-sizing border-box no tema para que padding e borda não estourem a largura das colunas
Aplique max-width 100% em imagens e tabelas do conteúdo para nenhum elemento ultrapassar a coluna
Edite CSS apenas em tema filho ou no Personalizar, para que atualizações do tema não revertam o ajuste

Causa

Uma imagem ou tabela mais larga que a coluna de conteúdo estoura o container e empurra a sidebar para baixo por falta de overflow controlado.
A soma das larguras em porcentagem do conteúdo e da sidebar passa de 100%, geralmente após editar o CSS do tema ou adicionar padding sem box-sizing border-box.
Uma tag HTML aberta e não fechada dentro do post (div, figure, table) engole o markup seguinte e desmonta a estrutura de colunas.
O elemento que vem depois de blocos com float não recebeu a propriedade clear, então o navegador não reinicia a linha e a sidebar desce.
Um plugin de page builder inseriu um container com largura fixa em pixels que, somada à sidebar, não cabe na largura do tema.

Como resolver

Identifique se é conteúdo ou tema: abra uma página onde o layout quebra e outra onde funciona. Se quebra só em posts específicos, a causa está no conteúdo (HTML aberto ou imagem larga). Se quebra no site todo, a causa está no CSS do tema.
Procure tags HTML não fechadas: no post que quebra, alterne para o editor de código e procure por uma div, figure ou table sem o fechamento correspondente. Feche a tag que ficou aberta para o WordPress remontar a estrutura de colunas.
Confira as larguras das colunas: inspecione o elemento (F12) sobre o container do conteúdo e sobre a sidebar. Se a soma dos width passar de 100%, reduza a largura do conteúdo no CSS do tema filho até as duas colunas caberem lado a lado.
Controle imagens e tabelas largas: aplique max-width: 100% nas imagens e tabelas do conteúdo via CSS do tema filho, para que nenhum elemento estoure a coluna e force a sidebar a descer.
Limpe o cache e teste: depois de salvar o CSS, limpe o cache do plugin de cache e do navegador (Ctrl+F5) e confira a página. A sidebar deve voltar ao lado do conteúdo.

CSS

/* CSS adicional (Personalizar) ou style.css do tema filho */
/* 1. impede que conteudo e sidebar somem mais de 100% */
.content-area,
.site-main {
    box-sizing: border-box;
}

/* 2. impede imagens e tabelas largas de estourar a coluna */
.entry-content img,
.entry-content table {
    max-width: 100%;
    height: auto;
}

/* 3. clear: reinicia a linha apos blocos com float, evitando a sidebar descer */
.site-content:after {
    content: "";
    display: block;
    clear: both;
}

Perguntas frequentes

Por que a barra lateral do meu WordPress foi parar embaixo do conteúdo?

Quase sempre é CSS: a soma das larguras do conteúdo e da sidebar passou de 100%, uma imagem ou tabela larga estourou a coluna, ou faltou clear depois de um bloco com float. Sem caber lado a lado, o navegador empurra a sidebar para a linha de baixo.

Por que o layout quebra só em alguns posts?

Nesses casos a causa está no conteúdo, não no tema. Geralmente é uma tag HTML aberta e não fechada (uma div ou figure) ou uma imagem ou tabela mais larga que a coluna. Abra o editor de código do post e corrija o HTML ou limite a largura do elemento.

O que a propriedade clear do CSS resolve aqui?

Quando colunas usam float, o elemento seguinte precisa de clear para reiniciar a linha. Sem isso, o navegador continua a posicionar elementos na mesma altura e a sidebar acaba descendo. Aplicar clear: both no container depois do conteúdo costuma realinhar as colunas.

Como descubro qual elemento está estourando a largura?

Use o inspetor do navegador (F12), passe o mouse sobre o conteúdo e a sidebar e veja o width de cada um. Se a soma passar de 100%, ou se uma imagem aparecer com largura maior que a coluna, esse é o elemento que precisa de ajuste de max-width.

Editei o CSS e não mudou nada. Por quê?

Provável cache. Limpe o cache do plugin de cache e do navegador com Ctrl+F5. Se ainda assim não mudar, o seletor pode estar errado: confirme no inspetor o nome real da classe do container do seu tema e ajuste a regra para esse seletor.

Trocar de tema resolve o problema da sidebar?

Pode mascarar, mas não é o caminho mais seguro. Se a causa for HTML aberto no conteúdo, o defeito reaparece. Vale primeiro corrigir o CSS ou o HTML do post; só troque de tema se o layout dele realmente não suportar duas colunas na largura desejada.

Atenção

Como corrigir a importação de cursos que falha no Tutor LMS

No Tutor LMS importar curso falha quando o arquivo JSON é importado sem os addons correspondentes ativos, o upload estoura o limite do PHP, ou o recurso de Import/Export do Tutor LMS Pro não está disponível no site de destino.

Atenção

Como corrigir upload de arquivos em tarefas no Tutor LMS

O Tutor LMS assignment não aceita upload quando o addon Assignments tem o File Upload Limit em zero, quando o tamanho do arquivo passa do Maximum File Size Limit configurado, ou quando limites de PHP do servidor barram o envio antes de o Tutor LMS processar a tarefa.

Grave

Como corrigir formulários de inscricao do WPForms que não funcionam no Tutor LMS no WordPress

O formulário de inscricao do WPForms não funciona no Tutor LMS quando o WPForms cria a conta WordPress por fora do fluxo de cadastro do Tutor LMS: o usuário nasce sem o papel de estudante e sem passar pelo hook de signup, entao não aparece como aluno nem consegue se matricular nos cursos.

Grave

Como corrigir o erro de reCAPTCHA no WPForms

Quando o reCAPTCHA do WPForms não funciona, o formulário trava ao enviar, mostra 'Error for site owner: Invalid site key' ou o desafio nem aparece. As causas mais comuns são Site Key e Secret Key trocadas, o tipo de chave (v2 ou v3) diferente do escolhido em WPForms, e o domínio ausente no painel do Google reCAPTCHA.

Atenção

Como corrigir o embed do Instagram e Facebook quebrado no WordPress

O embed social quebrado no WordPress (posts do Instagram e Facebook) acontece porque a Meta descontinuou o oEmbed automático e passou a exigir app e token de acesso. A correção é usar o plugin oficial Smash Balloon para autenticar a incorporação com token válido.

Atenção

Como corrigir o spam no WPForms mesmo com reCAPTCHA ativo

WPForms continuar recebendo spam mesmo com reCAPTCHA ativo costuma indicar que a Proteção Antispam Moderna esta desligada no formulário antigo, que ha um único CAPTCHA por site ou que faltam camadas como tempo mínimo de envio e filtro de palavras.

Setores

Extensões

Integrações

Como corrigir a barra lateral abaixo do conteúdo no WordPress

O que é a barra lateral que cai abaixo do conteúdo?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir a importação de cursos que falha no Tutor LMS

Como corrigir upload de arquivos em tarefas no Tutor LMS

Como corrigir formulários de inscricao do WPForms que não funcionam no Tutor LMS no WordPress

Como corrigir o erro de reCAPTCHA no WPForms

Como corrigir o embed do Instagram e Facebook quebrado no WordPress

Como corrigir o spam no WPForms mesmo com reCAPTCHA ativo

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos