0

Como impedir que a sobreposição com outros elementos aconteça? Neste caso o título ACESSO RÁPIDO AOS PRINCIPAIS CANAIS está sobrepondo ao elemento abaixo - Areias monazíticas

Veja exemplo:

inserir a descrição da imagem aqui

CSS:

p.acessorapido{
float: left;
  width: 100%;
  height: 38px;
  max-width: 885px;
  margin-top: 20px;
  padding: 8px;
  padding-left: 0px;
  font-size: 20px;
  box-sizing: border-box;
  color: #eee;
  border-bottom: 1px #C11C05 solid;
}

p.acessorapido span {
  background-color: #C11C05;
  padding:5px;
}
2
  • A largura do seu span é maior que a do p, havendo, então, a quebra de linha. Qual é o resultado esperado? Que a borda lateral vermelha ficasse abaixo apenas de "Principais Canais" sem sobrepor outros conteúdos? Aliás, qual é a função do float: left aí?
    – Woss
    20/06/2017 às 15:36
  • 1
    Tem vários aspectos a ser considerado ai @Gladison, o ideal seria vc postar também o código HTML para termos certeza do que esta errado. Pelo q eu entendi ele esta flutuando por causa do float:left e por isso o elemento de baixo preenche os vazios, sendo que um margin é considerado espaço vazio "preenchível" quando se tem o float. Um display: block pode ajudar, ou inline-block, ou até um clear: both dependendo do caso. 20/06/2017 às 16:02

1 Resposta 1

0

Creio que vc deva adicionar o float: left ao segundo item também:

p.acessorapido{
float: left;
  width: 100%;
  height: 38px;
  max-width: 885px;
  margin-top: 20px;
  padding: 8px;
  padding-left: 0px;
  font-size: 20px;
  box-sizing: border-box;
  color: #eee;
  border-bottom: 1px #C11C05 solid;
}

p.acessorapido span {
  background-color: #C11C05;
  padding:5px;
  float: left;
}

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 .