Last elements of a class running incorrectly

Asked

Viewed 21 times

3

See this print that you will understand what is happening: http://imgur.com/a/B0zkV

I’ve checked the code several times and apparently found no error, follows the html and css part of this class:

HTML:

main .main-pagina .services-principal {display: table;background: #eee;margin-bottom: 100px}
main .main-pagina .services-principal .services {float: left;width: 49%;background: transparent;box-sizing: border-box;background: #eee;margin: 0;padding: 5px}
main .main-pagina .services-principal .services .services-bloco {padding: 20px 5px;display: table}
main .main-pagina .services-principal .services .services-bloco img {float: left;}
main .main-pagina .services-principal .services .services-bloco h3 {float: left;font-family: 'Raleway', sans-serif;font-size: 16px;color: #111;padding-left: 15px;margin-top: 10px;box-sizing: border-box;}
main .main-pagina .services-principal .services .services-bloco span {width: 100%;height: 100px;overflow: hidden;display: block;float: left;font-family: 'Raleway', sans-serif;font-size: 14px;color: #454545;padding-left: 48px;box-sizing: border-box;margin-top: 10px;line-height: 22px}
<div class="services-principal" id="servicos">
				<div class="services">

					<div class="services-bloco">
						<img src="images/icones/profissional.png">
						<h3>Serviços</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting</span>
					</div><!-- fim services-bloco -->

					<div class="services-bloco">
						<img src="images/icones/suporte.png">
						<h3>Suporte 24 Hrs</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting industry of the</span>
					</div><!-- fim services-bloco -->

				</div><!-- fim services -->

				<div class="services">

					<div class="services-bloco">
						<img src="images/icones/marketing.png">
						<h3>Marketing</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting</span>
					</div><!-- fim services-bloco -->

					<div class="services-bloco">
						<img src="images/icones/inovacao.png">
						<h3>Inovação</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry typesetting</span>
					</div><!-- fim services-bloco -->

				</div><!-- fim services -->

				<div class="services">

					<div class="services-bloco">
						<img src="images/icones/video.png">
						<h3>Edição de vídeos</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry</span>
					</div><!-- fim services-bloco -->

					<div class="services-bloco">
						<img src="images/icones/recuperacao.png">
						<h3>Recuperação de dados</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy</span>
					</div><!-- fim services-bloco -->

				</div><!-- fim services -->

				</div><!-- fim services-principal -->

html css

2 answers

2

I made a change to your code by adding the .services-bloco in your CSS this way:

 .services-bloco{ width: 40%; float: left;}

Test and check the code below:

.main-pagina .services-principal {display: table; background: #eee;margin-bottom: 100px}
.main-pagina .services-principal .services {float: left;width: 49%;background: transparent;box-sizing: border-box;background: #eee;margin: 0;padding: 5px}
.services-bloco {padding: 20px 5px;display: table}
.services-bloco img {float: left;}
.services-bloco h3 {float: left;font-family: 'Raleway', sans-serif;font-size: 16px;color: #111;padding-left: 15px;margin-top: 10px;box-sizing: border-box;}
.services-bloco span {width: 100%;height: 100px;overflow: hidden;display: block;float: left;font-family: 'Raleway', sans-serif;font-size: 14px;color: #454545;padding-left: 48px;box-sizing: border-box;margin-top: 10px;line-height: 22px}
.services-bloco{ width: 40%; float: left;}
<div class="services-principal" id="servicos">
   <div class="services">
      <div class="services-bloco">
         <img src="images/icones/profissional.png">
         <h3>Serviços</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting</span>
      </div>
      <!-- fim services-bloco -->
      <div class="services-bloco">
         <img src="images/icones/suporte.png">
         <h3>Suporte 24 Hrs</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting industry of the</span>
      </div>
      <!-- fim services-bloco -->
   </div>
   <!-- fim services -->
   <div class="services">
      <div class="services-bloco">
         <img src="images/icones/marketing.png">
         <h3>Marketing</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting</span>
      </div>
      <!-- fim services-bloco -->
      <div class="services-bloco">
         <img src="images/icones/inovacao.png">
         <h3>Inovação</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry typesetting</span>
      </div>
      <!-- fim services-bloco -->
   </div>
   <!-- fim services -->
   <div class="services">
      <div class="services-bloco">
         <img src="images/icones/video.png">
         <h3>Edição de vídeos</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry</span>
      </div>
      <!-- fim services-bloco -->
      <div class="services-bloco">
         <img src="images/icones/recuperacao.png">
         <h3>Recuperação de dados</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy</span>
      </div>
      <!-- fim services-bloco -->
   </div>
   <!-- fim services -->
</div>
<!-- fim services-principal -->

  • tbm didn’t work, I don’t know what else to do because the error is only in the last services-block class, I thought it was the last div with error, so I deleted and copied the previous services-block class instead of the last one and the problem continues

  • Did you see it working here when running? It appears right next door in the last class. Have you checked the image size if they are exactly the same size?

  • are all the same size and height

  • it worked, I did what you said and was still giving problem, then I used what you said and gave a width of 99% in the services class and gave it right, vlw

  • @Otaviofagundes Blz. Good Luck! Abs.

  • @Otaviofagundes later when you have time, validate the answer for other people to see that the solution worked.

Show 1 more comment

0

What I could understand is that the divwho is wrong belongs to the same block of his div previous... This is a problem you will have to solve in your layout.

A quick solution would be to open a new block services with the div wrong and would be like this:

<div class="services-principal" id="servicos">
    <div class="services">
        <div class="services-bloco">
            <img src="images/icones/profissional.png">
            <h3>Serviços</h3>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting</span>
        </div><!-- fim services-bloco -->
        <div class="services-bloco">
            <img src="images/icones/suporte.png">
                <h3>Suporte 24 Hrs</h3>
                <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting industry of the</span>
        </div><!-- fim services-bloco -->
    </div><!-- fim services -->
    <div class="services">
        <div class="services-bloco">
            <img src="images/icones/marketing.png">
            <h3>Marketing</h3>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting</span>
        </div><!-- fim services-bloco -->
        <div class="services-bloco">
            <img src="images/icones/inovacao.png">
            <h3>Inovação</h3>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry typesetting</span>
        </div><!-- fim services-bloco -->
    </div><!-- fim services -->
    <div class="services">
        <div class="services-bloco">
            <img src="images/icones/video.png">
            <h3>Edição de vídeos</h3>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry</span>
        </div><!-- fim services-bloco -->
    </div><!-- fim services -->
    <div class="services">
        <div class="services-bloco">
            <img src="images/icones/recuperacao.png">
            <h3>Recuperação de dados</h3>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy</span>
        </div><!-- fim services-bloco -->
    </div><!-- fim services -->
</div><!-- fim services-principal -->

Browser other questions tagged html css

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