Problems with the positioning of an element

Asked

Viewed 47 times

3

I want to leave the date fixed in the right-hand corner, considering that the div is being created by a while and that the position of the date does not depend on the extent of the description.

<div style="background-color:grey;">
    <P>
        <a href=""><font size='5px'>Titulo</font></a><br>
        <p class="descricao_noticia"><font color='black' size='4px'>Descricao noticia</font></p>
        <font color='black' size='4px'>data</font>    
    </p>
</div>

3 answers

2

You have to put the display:inline-block and float on the right.

.descricao_noticia{
  width:80%;
  display:inline-block;
}

.data{
  text-align:right;
  display:inline-block;
  float:right;
}
<div style="background-color:grey;">
<P>
  
  <a href=""><font size='5px'>Titulo</font> </a>
  <br>
  <p class="descricao_noticia">
    <font color='black' size='4px'>Descricao noticia<br>Descrição Notícia<br>Descrição Notícia<br>Descrição Notícia</font>
  </p>   
  <p class="data"><font color='black' size='4px' id="data">data</font></p>
</P>
</div>

  • The problem is that I want to put the following description and just as it is depends on the description if the description has one more line the date will be further down

  • I didn’t realize, it’s already fixed

  • I didn’t realize, it’s already fixed

0

A simpler way is to use absolute and padding getting exactly like this:

.right {
  position: absolute;
  right: 0px;
  padding: 5px;
<div class="right">
  data
</div>

-1


I resolved it this way

<div style="background-color:grey;height:180px; position: relative;">
    <P>
        <a href=""><font size='5px'>Titulo</font></a><br>
        <p class="descricao_noticia"><font color='black' size='4px'>Descricao noticia</font></p>
<div style='position: absolute; top: 40%;bottom:1%;right:1%;margin: 10% 0 0 10%;'  >data</div>  
    </P>
</div>

Browser other questions tagged

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