Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mariod

Como botar uma div do lado da outra ?

Por , em Desenvolvimento frontend

Recommended Posts

mariod    0

mariod
Postado

Boa noite, gostaria de colocar uma div ao lado da outra

meu código ta assim:

<html>
<head>
<title>CSS</title>
<meta charset="latin1">
<style>
#tudo {
	width: 800px;
	height: 600px;
	background-color: orange;
}
#tudo1 {
	width: 200px;
	height: 200px;
	background-color: green;
	float: left;
}
#tudo2 {
	position: relative;
	left: 200px;
	width: 200px;
	height: 200px;
	background-color: red;
	float: left;
}
#tudo3 {
	position: relative;
	left: 200px;
	width: 200px;
	height: 200px;
	background-color: blue;
	float: left;
}
#tudo4 {
	position: relative;
	left: 200px;
	width: 200px;
	height: 200px;
	background-color: purple;
}
</style>
</head>
<body>
<div id="tudo">
	<div id="tudo1">
	</div>
	<div id="tudo2">
	</div>
	<div id="tudo3">
	</div>
	<div id="tudo4">
	</div>
</div>

</body>
</html>

mas as cores estão saindo errado, esta saindo na ordem verde, roxo, vermelho e azul

e eu pretendia deixar verde, vermelho, azul, roxo

 

 

grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

juninhogpe    15

juninhogpe
Postado

Coloque um:

 

float:left;

no "tudo4" e retire os "left:200px;" de todos.

 

Ficando assim:

 

<html>
<head>
<title>CSS</title>
<meta charset="latin1">
<style>
#tudo {
	width: 800px;
	height: 600px;
	background-color: orange;
}
#tudo1 {
	position:relative;
	width: 200px;
	height: 200px;
	background-color: green;
	float: left;
}
#tudo2 {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: red;
	float: left;
}
#tudo3 {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: blue;
	float: left;
}
#tudo4 {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: purple;
	float:left;
}
</style>
</head>
<body>
<div id="tudo">
	<div id="tudo1"></div>
    <div id="tudo2"></div>
    <div id="tudo3"></div>
    <div id="tudo4"></div>

</div>

</body>
</html>

Qualquer dúvida posta ai.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito