Escrevo algo em uma das div e ela muda de posição. Porque?
Tem como fazer a div volta a posição anterior mesmo com o conteúdo dentro?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Escrevo algo em uma das div e ela muda de posição. Porque?
Tem como fazer a div volta a posição anterior mesmo com o conteúdo dentro?
A div muda de posição porque o seu conteúdo está mudando de tamanho. Quando você escreve algo na div, o texto é adicionado ao conteúdo da div, o que faz com que ela aumente de tamanho. Se a div não tiver espaço suficiente para acomodar o novo conteúdo, ela mudará de posição para se ajustar ao novo tamanho.
Existem algumas maneiras de fazer a div voltar à sua posição anterior, mesmo com o conteúdo dentro. Uma maneira é usar a propriedade CSS overflow. A propriedade overflow controla o que acontece com o conteúdo de um elemento quando ele ultrapassa o limite do elemento. Por exemplo, se você definir a propriedade overflow para hidden, o conteúdo do elemento será escondido quando ultrapassar o limite do elemento. Isso fará com que a div não mude de posição, mesmo com o conteúdo dentro.
Outra maneira de fazer a div voltar à sua posição anterior é usar a propriedade CSS white-space. A propriedade white-space controla o espaçamento entre as palavras em um elemento. Por exemplo, se você definir a propriedade white-space para nowrap, as palavras no elemento não serão quebradas em linhas novas. Isso fará com que a div não mude de posição, mesmo com o conteúdo dentro.
A maneira mais eficaz de fazer a div voltar à sua posição anterior é usar uma combinação das propriedades CSS overflow e white-space. Por exemplo, você pode definir a propriedade overflow para hidden e a propriedade white-space para nowrap. Isso fará com que o conteúdo do elemento seja escondido quando ultrapassar o limite do elemento e as palavras no elemento não sejam quebradas em linhas novas. Isso fará com que a div não mude de posição, mesmo com o conteúdo dentro.
Aqui está um exemplo de como usar as propriedades CSS overflow e white-space para fazer a div voltar à sua posição anterior:
div { overflow: hidden; white-space: nowrap; } Este código fará com que a div não mude de posição, mesmo com o conteúdo dentro.