0

criei um cabeçalho, com um fundo, texto e imagem. quero deixar o texto na esquerda e a imagem a direita. coloquei o float:right mas ai o fundo acaba sumindo.

.fundo1 {
  background: linear-gradient(266.22deg, #BFF4FF 38.6%, rgba(255, 255, 255, 0) 163.18%);
  overflow: hidden;
}

.imglabelle {
  position: absolute;
  right: 0px;
  padding: 10px;
}
<header id="fundo1" class="fundo1">
  <h1 class="tdbb">
    Tudo para o seu bebê<br> Entregas para todo o Brasil
  </h1>
  <img src="https://www.placecage.com/gif/100/100" class="imglabelle">
</header>

2
  • A imagem deveria ficar alinhada à direita abaixo do texto mesmo ou lado a lado?
    – Woss
    Commented 13/01/2021 às 15:26
  • a direta lado a lado
    – Yas Min
    Commented 13/01/2021 às 15:35

1 Resposta 1

2

Amigo o problema não é o float, é o position, vc colocou como absolute, então o ponto de referência dele é o body nesse caso... para o ponto ser o container pai é preciso que o pai tenha position: relative, assim o filho em absoluto fica relativo ao pai.

Além disso, faltou vc colocar um top no filho... vc só colocou right, mas tb é indicado colocar explicitamente uma orientação vertical

.fundo1 {
  background: linear-gradient(266.22deg, #BFF4FF 38.6%, rgba(255, 255, 255, 0) 163.18%);
  overflow: hidden;
  
  position: relative;
}

.imglabelle {
  position: absolute;
  right: 0px;
  padding: 10px;

  top: 0;
}
<header id="fundo1" class="fundo1">
  <h1 class="tdbb">
    Tudo para o seu bebê<br> Entregas para todo o Brasil
  </h1>
  <img src="https://www.placecage.com/gif/100/100" class="imglabelle">
</header>


Observação sobre o float

Em alguma situações quando vc usa float em um filho o container pai perde a referência do filho no content-flow, com isso o pai não reconhece a altura do filho. Uma técnica amplamente usada para corrigir isso é o clearfix, vc pode ler mais sobre isso nessas duas questões.

Float vs. inline-block. Quais as vantagens e desvantagens de cada um?

Qual é o efeito que a propriedade overflow: hidden está fazendo no código?

Exemplo, repare que o pai perdeu a referência de altura dos filhos. Nesse código abaixo vc só consegue ver o BG vermelho do pai pq eu dei um padding, mas se vc remover o padding a cor de BG do pai some.

inserir a descrição da imagem aqui

.container {
  border: 1px solid black;
  background-color: #f00;
  padding: 2px;
}
.container div {
  float: right;
  border: 1px solid blue;
}
<div class="container">
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
</div>

2
  • Acha que vale a pena colocar aqui que ao usar o float a altura do elemento pai deixa de respeitar o tamanho da imagem?
    – Woss
    Commented 13/01/2021 às 16:14
  • 1
    @Woss sim, no caso dele não aconteceu por causa do tamanho do próprio texto, mas vou deixar um pergunta sobre clearfix como referência
    – hugocsl
    Commented 13/01/2021 às 18:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .