How can one element not overlap the other?

Asked

Viewed 756 times

0

How to prevent the overlap with other elements from happening? In this case the title QUICK ACCESS TO MAIN CHANNELS is superimposing the element below - Monazite sands

See example:

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;
}
html5 css3

  • The width of your span is greater than that of the p, then there is the line break. What is the expected result? That the red side edge was below only "Main Channels" without overlapping other content? By the way, what is the function of float: left there?

  • 1

    There are several aspects to be considered ai @Gladison, the ideal would be you also post the HTML code to make sure that this is wrong. From what I understand it’s floating because of float:left and so the bottom element fills the voids, a margin being considered "fillable" empty space when you have the float. A display: block can help, or inline-block, or even a clear: both depending on the case.

1 answer

0


I think you should add the float: left to the second item as well:

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;
}

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.