****Olá time Alura, acabei de terminar o cursos de HTML e CSS e estou botando em prática criando um site do zero. Estou com problema de posicionamento, quero que os textos fiquem no lado da imagem mas elas ficam em baixo dela, já tentei de tudo, uma ajuda agora seria uma boa.
CSS.
.imagem-referencia{
width: 400px;
float: left;
margin: 0 20px 20px 15px;
}
.texto-principal {
text-align: left;
font-size: 2em;
margin: 0 0 1em;
clear: left;
}
Ooi Arthur, tudo bem?
Desculpe a demora em retornar.
Parabéns por terminar o curso de HTML e CSS e já estar colocando em prática o que aprendeu!
Pela sua descrição, acredito que o problema esteja no fato de que você definiu a classe "imagem-referencia" com o atributo "float: left", mas não fez o mesmo com a classe "texto-principal".
Para que o texto fique ao lado da imagem, você precisa definir a classe "texto-principal" com o mesmo atributo "float: left". Além disso, é importante que você defina uma largura para a div que contém a imagem e o texto, para que eles fiquem alinhados corretamente.
Segue um exemplo de como ficaria o seu código CSS com essas alterações:
.imagem-referencia {
width: 400px;
float: left;
margin: 0 20px 20px 15px;
}
.texto-principal {
text-align: left;
font-size: 2em;
margin: 0;
float: left;
width: calc(100% - 435px); /* largura da div - largura da imagem - margens */
}Essa é uma maneira de fazer o que você deseja, com base no código que você mandou.
Espero que isso ajude a resolver o seu problema de posicionamento!
Espero ter ajudado.
Um abraço e bons estudos.