Home / Questions / 24944
Accepted
May
Asked: 2020-09-25 13:25:41 +0800 CST 2020-09-25 13:25:41 +0800 CST

Layout error when floating html5 css3 content

  • 772

Is there any other way to prevent floating content from overlapping other tags.

To prevent divcontent floats from single serviciesoverlapping other content I use this <div style="clear: both;"></div>as a rule at the end to prevent content single serviciesfrom overlapping other tags.

Without it all the content is on top, it would be possible that instead of using clear: both;the property heightof the content body it would increase as if the contents single serviciesdid not have this propertyfloat: left;

#services {
  padding-top: 40px!important;
  display: block;
}

.services-title {
  text-align: center;
}

.services-title h2 {
  font-size: 18px;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.services-title p {
  margin: 0 auto;
  max-width: 800px;
}

.single-services {
  float: left;
  padding-left: 15px;
  margin-bottom: 30px;
  padding-right: 15px;
}

footer {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 180px;
  background-color: #333;
}
  <div id="services">
<div id="container">
  <div class="services-title">
    <h2>Nuestro Servicio</h2>
    <p>Lorem Ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div class="single-services">
    <h3>Title Title</h3>
    <p>Lorem Ipsum Dolor Sit AET Constetuer Adipiscing Elit Sednonummy</p>
  </div>
  <div style="clear: both;"></div>
</div>
  </div>
<footer>
  <div id="content">
  </div>
</footer>

html5

1 Answers

  1. Best Answer

    In the css style file change the float: left:

     .single-services {
  float: left;
  padding-left: 15px;
  margin-bottom: 30px;
  padding-right: 15px;
}

    fordisplay: inline-block;

    .single-services {
  display: inline-block;
  padding-left: 15px;
  margin-bottom: 30px;
  padding-right: 15px;
}

    This should work.

    • 3