Last elements of a class running incorrectly

Question

Last elements of a class running incorrectly

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

Look at this print that you'll understand what's going on: link

I have checked the code several times and apparently I did not find any errors, it 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

asked by anonymous 08.01.2017 / 18:19

2 answers

Retrieve latitude and longitude of marker (marker) How do I pass an array of structure pointers to a function?

score 2 · Answer 1

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

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

Test and verify 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 -->

score 0 · Answer 2

What I noticed is that the div that is wrong belongs to the same block as your previous div ... This is a problem that you will have to solve in your layout.

One quick solution would be to open a new block services with the wrong div and look 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 -->