How to make image respect page content

Asked

Viewed 43 times

0

I was able to align my image through this topic Align text after image , only that the image sits on top of some other content of the page, as I could arrange?

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

  • Put a more elaborate example... How can we help if we don’t even have css?

  • just of you do . areaText{float:right; width: 90%;} is already to work, you’re also styling a paragraph (p) that you don’t even have

1 answer

0


Create a div to be the parent, in this case called content, and add a display: inline-block; to break to the next line. Follow 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>

Browser other questions tagged html css

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