Ir para conteúdo

POWERED BY:

Arquivado

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

Felipe.P

[Resolvido] Floats Necessários

Por , em Desenvolvimento frontend

Recommended Posts

NetBoy16    72

NetBoy16
Postado

segue abaixo:

 

#esquerda {
  float: left;
}

#direita {
  float: right;
}

 

Eu tb tinha duvida quanto ao uso de float, mas aprendi que é simples, você usa float: left quando precisa jogar algo pra esquerda e float: right quando precisa jogar algo pra direita :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe.P    0

Felipe.P
Postado

segue abaixo:

 

#esquerda {
  float: left;
}

#direita {
  float: right;
}

 

Eu tb tinha duvida quanto ao uso de float, mas aprendi que é simples, você usa float: left quando precisa jogar algo pra esquerda e float: right quando precisa jogar algo pra direita :)

 

Fala maninho, cara fico tudo atropelado. não funcionou!

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

deve ser alguma coisa no teu css, coloca ele ai pra eu dar uma olhada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

#esquerda: float left

#conteudo e #conteudo_dois: trabalhar com margin, ou simplesmente margin:auto

#direita: float right

 

Se não entendeu nada:

:seta: http://www.w3schools.com/cssref/pr_class_float.asp

:seta: http://www.w3schools.com/css/css_margin.asp

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

e você tb tem que deixar o html na ordem certa, por exemplo se você colocar a tag da div esquerda antes da direita por exemplo, dai dar errado :bye:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe.P    0

Felipe.P
Postado

divs.html

<html>
<head>
<title>Teste</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<div id="esquerda"></div><!--esquerda-->
<div id="conteudo"></div><!--conteudo-->
<div id="conteudo_dois"></div><!--conteudodois-->
<div id="direita"></div><!--direita-->
</div><!--content-->

</body>

</html>

 

 

style.css

#content {
width:1100px;
margin:0 auto;
}
#esquerda {
width:220px;
height:650px;
background:#F6546F;
float:left;
}
#conteudo{
width:640px;
height:400px;
background:#020202;
float:left;
margin:0 10px 0 10px;
}
#conteudo_dois {
width:640px;
height:240px;
background:#069;
float:left;
margin:10px 10px 0 10px;
}
#direita {
width:220px;
height:650px;
background:#CC0;
float:right;
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado 

<div id="content">
<div id="esquerda"></div><!--esquerda-->
<div id="conteudo"></div><!--conteudo-->
<div id="direita"></div><!--direita-->
<div id="conteudo_dois"></div><!--conteudodois-->
</div><!--content-->

 

Assim :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Fiz assim e ficou mais ou menos do jeito que você quer,porém, as divs esquerda e direita

ficam sempre no cantinho.

Testa ae.

 

<html>
<head>
<title>	TEste</title>
<style>
#geral{margin:0 auto;border-color:red;text-align:center;}
div{border:1px #111 solid;}
#e,#d{width:100px;height:400px;}
#e{float:left;}
#d{float:right;}
#c1, #c2{margin:auto;width:400px;height:200px;}
</style>
</head>	
<body>
	<div id="geral">	
		<div id="e"></div>
		<div id="d"></div>
		<div id="c1"></div>
		<div id="c2"></div>

	</div>	
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

porém, as divs esquerda e direita ficam sempre no cantinho.

Testa ae.

[/code]

Sim, pq você não determinou uma largura fixa pra div #geral :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe.P    0

Felipe.P
Postado 

<div id="content">
<div id="esquerda"></div><!--esquerda-->
<div id="conteudo"></div><!--conteudo-->
<div id="direita"></div><!--direita-->
<div id="conteudo_dois"></div><!--conteudodois-->
</div><!--content-->

 

Assim :)

 

Funcionou certinho! Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Sim, pq você não determinou uma largura fixa pra div #geral :)

Isso é verdade Diéssica. Depois que postei determinei a largura da div#geral

e não deu pra postar devido a correria. Valeuul.

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