Como coloco essas duas imagens uma ao lado da outra

[Jr_Mendes 0]

<div id="margem">

   <div id="texto">



<p align="left"><strong>Mapas de Precipitações de Alagoas por Ano 2010-2017</strong></p>
                    <p align="left"> </p>
                    <hr />
                    
                    
                    <p align="left"><img src="mapas/precipitacao/AL/mapa10.jpg" width="225" height="400" /></p>
                    <p align="left"><a href="mapas/precipitacao/AL/2000-2017_ano_AL_v3.rar"> Download do Mapa do ano de 2010 </a></p>
                    
                    <p align="right"><img src="mapas/precipitacao/AL/mapa11.jpg" width="225" height="400" /></p>
                    <p align="right"><a href="mapas/precipitacao/AL/2000-2017_ano_AL_v3.rar"> Download do Mapa do ano de 2011  </a></p>
                    

                    <hr />

 

CSS

#margem{
padding-right:40px;
padding-left:40px;
padding-top:25px;
padding-bottom:25px;

}



#texto{
text-align:justify;
}

#texto a:link{
color:black;
text-decoration:underline;
}

#texto a:active{
color:black;
text-decoration:underline;
}

#texto a:visited{
color:black;
text-decoration:underline;
}

#texto a:hover{
color:#007dbe;
text-decoration:underline;
}

[quintelab 91]

Eu usaria bootstrap: https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

[FuckSystem 1]

Já tentou usar isso?

Mas ae no caso bota na segunda imagem a id img2

 

 

Css

 

#img2{

float:left;

}

[Omar~ 87]

Seguindo a sugestão de @FuckSystem ficaria assim:

<style>
  .alinhar {float: left}
  .limpar {clear:both}
  .conteudo {padding:10px}
</style>

<div class="alinhar">
  <div class="conteudo">
    coloque a imagem aqui
    <p align="center">Coloque o texto aqui</p>
  </div>
  <div class="conteudo">
    coloque a imagem aqui
    <p align="center">Coloque o texto aqui</p>
  </div>
</div>
<div class="limpar"></div>

Mas caso queira lado-a-lado e centralizado veja isso:

 

[Maujor 144]

Crie dois div.container-. Um para grupo imagem + texto e um div.clear (depois do segundo container) como mostrados a seguir:

<div class="container-1">
 <p align="left"><img src="mapas/precipitacao/AL/mapa10.jpg" width="225" height="400" /></p>
 <p align="left"><a href="mapas/precipitacao/AL/2000-2017_ano_AL_v3.rar">Download do Mapa do ano de 2010 </a></p>
</div>                    

<div class="container-2">
 <p align="right"><img src="mapas/precipitacao/AL/mapa11.jpg" width="225" height="400" /></p>
 <p align="right"><a href="mapas/precipitacao/AL/2000-2017_ano_AL_v3.rar"> Download do Mapa do ano de 2011</a></p>
</div>

<div class="clear"></div>

Acrescente as seguintes regras CSS:

.container-1, .container-2 { float: left; }
.container-1 { margin-right: 40px; }
.clear { clear: both; }

 

[Omar~ 87]

@Jr_Mendes Estava eu a escrever uma explicação sobre algumas regras CSS, e estava com dificuldade em explicar com eloquência determinados regras, porque saber como fazer e o que faz é fácil, daí a explicar para leigos sem conhecimento algum é outra história.

Então fui pesquisar na web para obter alguma ajuda. Eis que bati no blog do @Maujor e nessa página serviu de referência a me ajudar a escrever meu artigo. Como também tem formas de executar o que procura com um explicação mais detalhada de como exibir elementos em linha:

http://www.maujor.com/tutorial/anti-heroi-css-display-table.php