How to make image respect page content

Question

How to make image respect page content

Navigation

#1 by (0 votes)

0

I was able to align my image with this topic Align text after image , but the image is on top of some other content on the page, how could I fix it?

My div:

<div width="10%" class="areaImagem">
    <?php 
        $id = $PDO->lastInsertId();
        echo  "<img src='imagens/". $id ."/".$user['foto']."' alt='Foto' width='30%' height='30%'/>"; ?>
</div>

<div class="areaTexto">
     <b>Título:</b> <?php echo $user['titulo'] ?> <br />
</div>

CSS:

.areaImagem{
    float:left;
    margin-top:10px;
}

.areaImagem img{
    width:400px;
}

.areaTexto{
    float:left;
    max-width:500px;
    margin-left:10px;
}

html css

asked by anonymous 05.09.2018 / 15:08

1 answer

Values returned by a postgresql function are always null! Simple Chained List

score 0 · Accepted Answer

Create a div to be the parent, in case I called content, and add a display: inline-block; to break to the next line. follows an example

.areaImagem{
    float:left;
    margin-top:10px;
}

.areaImagem img{
    width:300px;
}

.areaTexto{
    float:right;
    max-width:500px;
    margin-left:10px;
    margin-top: 50px;
}

.content{display: inline-block;}

<div class="content">
  <div width="10%" class="areaImagem">
     <img src='https://repositorio.ufsc.br/bitstream/handle/123456789/105942/Free.jpg?sequence=1&isAllowed=y' alt='Foto' width='30%' height='30%'/>
  </div>

  <div class="areaTexto">
       <b>Título:</b> Titulo <br />
  </div>
</div>

<div class="content">
  <div width="10%" class="areaImagem">
     <img src='https://repositorio.ufsc.br/bitstream/handle/123456789/105942/Free.jpg?sequence=1&isAllowed=y' alt='Foto' width='30%' height='30%'/>
  </div>

  <div class="areaTexto">
       <b>Título:</b> Titulo <br />
  </div>
</div>