Jump to content


Photo

Quebrar Um Float Dentro De Uma Div Sem Quebrar O Float De Uma Div Exte


  • Faça o login para participar
14 replies to this topic

#1 Yendis

Yendis

    Turista

  • Usuários
  • 29 posts
  • Sexo:Não informado

Posted 09/11/2008, 22:20

Olá pessoal,

Postei esse tópico pois já tenho essa dúvida há muito tempo e novamente ela não me deixou dormir nesse finde.
Imaginem um layout em que duas divs estão lado a lado seguidas de um rodapé: a de nº 1 com float:left e outra, nº 2, com posicionamento relativo por exemplo ao lado da 1ª e o rodapé, nº3, com clear:both, admitindo toda a largura proposta para o site. Dentro da div de nº2 ela contém uma imagem também com float left, um texto que segue ao lado da imagem naturalmente e uma outra div, nº4 que precisa não acompanhar o float da imagem, ok? Essa div precisa vir logo abaixo da imagem assim que o texto ao lado dessa mesma imagem acaba. Aí é que mora a questão!!! Se aplicarmos clear:left na div nº 4, ela não segue logo abaixo da imagem ou do texto ao lado da mesma imagem, ela simplesmente quebra o float e vai lá para o final da altura da div nº1 !!!! Impressionante esse bug!!! O clear: left quebra toda a incidência de float:left na página!
Odeio trabalhar com tabelas, mas por incrível que pareça, acho que seria a única solução a ser feita.
Se vocês puderem me ajudar, agradeço muito! Não gostaria de sujar o layout todo elaborado em tableless por causa de um posicionamento que parece tão simples, não é mesmo?

Já procurarei em todos os lugares: positoneverything e seu clearfix, reestudei a propriedade float, consultei os tópicos daqui do fórum que diziam respeito a isso, mas não encontrei nada! Se existir alguma outra forma de fazer a div 4 descer sem quebrar o float total da página, continuando a esquerda sem restringir a altura do texto ao lado da imagem seria formidável, mas acredito que não exista...

Segue código para vocês conferirem ou o anexo abaixo para quem preferir:

<div id="container">
	<div id="esquerda" style="float:left; width:200px; height:500px; background-color:#CCCCCC">
	Essa	div tem float:left e uma altura estabelecida ou pode ter qualquer elemento que tenha a altura maior do que o conjunto da imagem do google ao lado, por exemplo.</div>
	<div id="direita" style="margin-left:250px;">
		<img src="http://www.google.com.br/intl/pt-BR_br/images/logo.gif" width="276" height="110" style="float:left" />
		<p>A imagem ao lado também tem float:left e o texto abaixo deve ser posicionado abaixo dela, mas não quebrando todo o layout com a altura da div cinza. Esse texto ao lado pode crescer sem especificação de altura fixa. Será que a tabela é a solução???</p>
		<div id="clearDentro" style="clear:left; background-color:#FF6600">Quebrar apenas o float interno e não ter que descer toda a altura da primeira div com float. O clear left não funciona, nem mesmo o clearfix do site positioneverything. A div deveria ficar exatamente abaixo da imagem do Google e não ter que descer toda a altura da div com clear:float de fora dessa div, concordam?</div>
	</div>
	<div id="clearFora" style="clear:all; background-color:#66CCCC ">
		div de fora, com clear: both.  Essa div se posiciona normalmente.
	</div>
</div>

Agradeço a atenção de todos!

Attached Files



#2 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 10/11/2008, 14:50

[codebox]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container{
width: 998px;
margin: 0 auto;
}
#A{
position: relative;
z-index: 1;
float: left;
width: 200px;
margin-right: 20px;
background-color: blue;
}

#B{
position: relative;
float: left;
width: 778px;
background-color: red;
}

#rodape{
clear: both;
width: 100%;
background-color: red;
}
//-->
</style>
</head>

<body>
<div id="container">

<div id="A">
<p>Id Maecenas leo laoreet lorem Aenean dignissim pretium Quisque Maecenas Nulla. Condimentum facilisi orci ut Sed wisi tincidunt penatibus Curabitur cursus Morbi. Orci Nam tellus laoreet ligula feugiat malesuada suscipit id arcu dui. Tristique nisl est tincidunt consequat Quisque accumsan congue lacinia enim sagittis. Phasellus tincidunt nibh cursus porta condimentum Maecenas velit Curabitur urna justo. Quisque vel venenatis tellus id vel nisl lacinia habitasse.</p>
<p>Netus lobortis nulla sem Quisque ligula sem Vivamus Phasellus ut Quisque. Mattis odio sem et turpis porttitor wisi dolor Duis lacus ac. Nulla faucibus Lorem Sed ante Vivamus felis quis augue Morbi justo. Ut magna et odio eget Quisque Nam faucibus adipiscing Nam Sed. Ultrices vitae interdum interdum Maecenas accumsan at rhoncus feugiat.</p>
<p>A lobortis Sed mauris eget pretium et non tincidunt elit magna. Orci est pede id et vel facilisi Curabitur convallis et Curabitur. Orci Sed ipsum convallis Aliquam auctor eu tempus nisl at Sed. Auctor non tempor sagittis malesuada nibh congue tristique porta enim et. Phasellus pede interdum nec adipiscing gravida lacus nec at cursus id. Quis pellentesque purus ipsum nec sit facilisis et.</p>
</div>

<div id="B">
<img src="http://www.google.co...mages/logo.gif" style="float: left;">
<p>Lorem ipsum dolor sit amet consectetuer tortor lorem quis condimentum Vestibulum. Orci semper et ac auctor Aliquam tellus massa quis mattis volutpat. A wisi In id justo eleifend sit montes wisi quis justo. Pellentesque accumsan In Donec et feugiat In vel id velit lacus. Nec felis vitae Vestibulum laoreet elit vitae penatibus malesuada id tincidunt. Metus augue a at.</p>
<div style="clear: all; background-color: #FF0;">Lorem ipsum dolor sit amet consectetuer tortor lorem quis condimentum Vestibulum. Orci semper et ac auctor Aliquam tellus massa quis mattis volutpat. A wisi In id justo eleifend sit montes wisi quis justo. Pellentesque accumsan In Donec et feugiat In vel id velit lacus. Nec felis vitae Vestibulum laoreet elit vitae penatibus malesuada id tincidunt. Metus augue a at.</div>
</div>
<div id="rodape">
<p>Lorem ipsum dolor sit amet consectetuer tortor lorem quis condimentum Vestibulum. Orci semper et ac auctor Aliquam tellus massa quis mattis volutpat. A wisi In id justo eleifend sit montes wisi quis justo. Pellentesque accumsan In Donec et feugiat In vel id velit lacus. Nec felis vitae Vestibulum laoreet elit vitae penatibus malesuada id tincidunt. Metus augue a at.</p>
<p>Id Maecenas leo laoreet lorem Aenean dignissim pretium Quisque Maecenas Nulla. Condimentum facilisi orci ut Sed wisi tincidunt penatibus Curabitur cursus Morbi. Orci Nam tellus laoreet ligula feugiat malesuada suscipit id arcu dui. Tristique nisl est tincidunt consequat Quisque accumsan congue lacinia enim sagittis. Phasellus tincidunt nibh cursus porta condimentum Maecenas velit Curabitur urna justo. Quisque vel venenatis tellus id vel nisl lacinia habitasse.</p>
<p>Netus lobortis nulla sem Quisque ligula sem Vivamus Phasellus ut Quisque. Mattis odio sem et turpis porttitor wisi dolor Duis lacus ac. Nulla faucibus Lorem Sed ante Vivamus felis quis augue Morbi justo. Ut magna et odio eget Quisque Nam faucibus adipiscing Nam Sed. Ultrices vitae interdum interdum Maecenas accumsan at rhoncus feugiat.</p>
<p>A lobortis Sed mauris eget pretium et non tincidunt elit magna. Orci est pede id et vel facilisi Curabitur convallis et Curabitur. Orci Sed ipsum convallis Aliquam auctor eu tempus nisl at Sed. Auctor non tempor sagittis malesuada nibh congue tristique porta enim et. Phasellus pede interdum nec adipiscing gravida lacus nec at cursus id. Quis pellentesque purus ipsum nec sit facilisis et.</p>
</div>

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

[/codebox]

Edição feita por: Édipo Costa Rebouças, 10/11/2008, 14:51.

Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#3 Yendis

Yendis

    Turista

  • Usuários
  • 29 posts
  • Sexo:Não informado

Posted 11/11/2008, 13:44

Olá, obrigado pela resposta, mas se vc confeir no seu exemplo, se o texto da camada em vermelho for menor do que a altura da imagem com o float:left, a div amarela (nº4) sobe ainda respeitando o float da imagem. A idéia é dar um clear no float interno da div e não no de todos.

Será que alguém conhece alguma forma de realizar essa simples e difícil operação em css??? É impressionante mas com tabelas é muito mais simples... creio que o css não seja tão vantajoso assim para operar com soluções tão simples de serem realizadas com tabelas, não é mesmo?

Aguardo o retorno de vocês!

Agradeço a atenção!

#4 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 11/11/2008, 15:10

você pode usar um span com clear:both e display:block; embaixo da imagem, é que vocÊ, e exclusivamente vocÊ esta complicado coisa simples...
ou até mesmo um br com style="clear:both".

Edição feita por: Édipo Costa Rebouças, 11/11/2008, 15:13.

Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#5 Yendis

Yendis

    Turista

  • Usuários
  • 29 posts
  • Sexo:Não informado

Posted 12/11/2008, 11:43

Olá, Édipo

Primeiramente, obrigado pela resposta! Eu já tentei esses artifícios e se você verificar no exemplo que eu anexei ao tópico, já existe uma div com clear:left que funcionaria nesse caso. Experimente ver a página com a sua solução no ie6 (ainda muito utilizado entre a maioria dos nossos clientes, não é mesmo?).

Se alguém souber de alguma saída crossbrowser, eu agradeço.

Obrigado pela atenção!

#6 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 12/11/2008, 11:53

eu faço sites para ie6 > , moz , opera, safari (são os browser que texto ) e essa saída funciona...

o que normalmente uso é uma classe chamada clearFull

[codebox]
.clearFull{
display: block;
clear: both;
}
[/codebox]

ai quando tenho um float encima e não quero quero que tudo fique abaixo dele, uso essa classe com span ou com div, depende das tags em questão.

ficaria por exemplo

imagem
<span class="clearFull"> <!-- --> </span>
qualquer coisa aqui em baixo fica abaixo da imagem
[codebox]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container{
width: 998px;
margin: 0 auto;
}
#A{
position: relative;
z-index: 1;
float: left;
width: 200px;
margin-right: 20px;
background-color: blue;
}

#B{
position: relative;
float: left;
width: 778px;
background-color: red;
}

#rodape{
clear: both;
width: 100%;
background-color: red;
}

.clearFull{
display: block;
clear: both;
}

//-->
</style>
</head>

<body>
<div id="container">

<div id="A">
<p>Id Maecenas leo laoreet lorem Aenean dignissim pretium Quisque Maecenas Nulla. Condimentum facilisi orci ut Sed wisi tincidunt penatibus Curabitur cursus Morbi. Orci Nam tellus laoreet ligula feugiat malesuada suscipit id arcu dui. Tristique nisl est tincidunt consequat Quisque accumsan congue lacinia enim sagittis. Phasellus tincidunt nibh cursus porta condimentum Maecenas velit Curabitur urna justo. Quisque vel venenatis tellus id vel nisl lacinia habitasse.</p>
<p>Netus lobortis nulla sem Quisque ligula sem Vivamus Phasellus ut Quisque. Mattis odio sem et turpis porttitor wisi dolor Duis lacus ac. Nulla faucibus Lorem Sed ante Vivamus felis quis augue Morbi justo. Ut magna et odio eget Quisque Nam faucibus adipiscing Nam Sed. Ultrices vitae interdum interdum Maecenas accumsan at rhoncus feugiat.</p>
<p>A lobortis Sed mauris eget pretium et non tincidunt elit magna. Orci est pede id et vel facilisi Curabitur convallis et Curabitur. Orci Sed ipsum convallis Aliquam auctor eu tempus nisl at Sed. Auctor non tempor sagittis malesuada nibh congue tristique porta enim et. Phasellus pede interdum nec adipiscing gravida lacus nec at cursus id. Quis pellentesque purus ipsum nec sit facilisis et.</p>
</div>

<div id="B">
<img src="http://www.google.co...mages/logo.gif" style="float: left;">
<span class="clearFull"> <!-- --> </span>
<div style="background-color: #FF0;">Lorem ipsum dolor sit amet consectetuer</div>
</div>
<div id="rodape">
<p>Lorem ipsum dolor sit amet consectetuer tortor lorem quis condimentum Vestibulum. Orci semper et ac auctor Aliquam tellus massa quis mattis volutpat. A wisi In id justo eleifend sit montes wisi quis justo. Pellentesque accumsan In Donec et feugiat In vel id velit lacus. Nec felis vitae Vestibulum laoreet elit vitae penatibus malesuada id tincidunt. Metus augue a at.</p>
<p>Id Maecenas leo laoreet lorem Aenean dignissim pretium Quisque Maecenas Nulla. Condimentum facilisi orci ut Sed wisi tincidunt penatibus Curabitur cursus Morbi. Orci Nam tellus laoreet ligula feugiat malesuada suscipit id arcu dui. Tristique nisl est tincidunt consequat Quisque accumsan congue lacinia enim sagittis. Phasellus tincidunt nibh cursus porta condimentum Maecenas velit Curabitur urna justo. Quisque vel venenatis tellus id vel nisl lacinia habitasse.</p>
<p>Netus lobortis nulla sem Quisque ligula sem Vivamus Phasellus ut Quisque. Mattis odio sem et turpis porttitor wisi dolor Duis lacus ac. Nulla faucibus Lorem Sed ante Vivamus felis quis augue Morbi justo. Ut magna et odio eget Quisque Nam faucibus adipiscing Nam Sed. Ultrices vitae interdum interdum Maecenas accumsan at rhoncus feugiat.</p>
<p>A lobortis Sed mauris eget pretium et non tincidunt elit magna. Orci est pede id et vel facilisi Curabitur convallis et Curabitur. Orci Sed ipsum convallis Aliquam auctor eu tempus nisl at Sed. Auctor non tempor sagittis malesuada nibh congue tristique porta enim et. Phasellus pede interdum nec adipiscing gravida lacus nec at cursus id. Quis pellentesque purus ipsum nec sit facilisis et.</p>
</div>

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

[/codebox]

Attached Files


Edição feita por: Édipo Costa Rebouças, 12/11/2008, 12:04.

Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#7 Yendis

Yendis

    Turista

  • Usuários
  • 29 posts
  • Sexo:Não informado

Posted 12/11/2008, 12:48

Olá, Édipo

Muito obrigado pela sua resposta, mas entendi o que estava acontecendo. Na div com posição relativa, eu não havia anunciado a sua width, e qualquer elemento que quebrasse um float interno dela, quebrava os de fora. Mais uma vez obrigado pela sua resposta! Um abraço!

#8 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 12/11/2008, 13:03

yendis, eu tinha tendo fazer isso, só colocar a largura no div com relative, mas tinha dado uns bugs cabulosos no ie6... mas se deu certo ai tá blz.
Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#9 thiagobousfield

thiagobousfield

    Novato no fórum

  • Usuários
  • 1 posts
  • Sexo:Não informado

Posted 12/11/2008, 15:55

ja tentasse fazer um arquivo seprado pro css?
ao invés de fazer inline como tas fazendo, digitando o style, width e heigth ali no html, faz
um arquivo css separado e ve se da certo..

qlqr c0isa fala ai..

abração

#10 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 09/10/2017, 00:23

Les Buy Cialis Black Online cheap cialis Levitra Duration How Much Cephalexin For Canines
Zentel Without Dr Approval Cialis Legal Bestellen Acheter Cialis Original Ligne viagra Prezzo Di Propecia Buy Azithromycin Fast Shipping
Clomid Diamicron generic cialis Viagra E Vene Varicose Levitra 10 Mg Ebay

#11 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 24/10/2017, 17:16

Keflex Decrease Acheter Prescription dove acquistare levitra sicuro Comprar Cialis Receta Albuterol Inhaler Mexico Cialis Drug 5 Mg Canada
Comprar Propecia En Espana viagra prescription Cephalexin For Skin Inflammation Propecia Online No Prescription
Descansar Propecia Amoxicillin Dose For Humans Mens Health Viagra viagra Acquistare Kamagra Miglior Sito Amoxicillin Causes Tinnitus Cialis 5 Mg Benefici
Cialis 20 Mg Alcohol Cialis 2 Day Delivery Canada Pharmacy Online Alli Diet Pill viagra Herbal Remedies For Vardenafil Levaquin Overseas Store Viagra Kaufen Ohne Rezept Deutschland

#12 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 05/11/2017, 09:26

Amoxicillin Wine viagra online pharmacy Baclofene Le Figaro
Cephalexin Uses Strep Throat Drug Interaction Between Keflex And Osmotics viagra online pharmacy Propecia Precios Intestinal Motility Disorder Diflucan Dosage
Premarin Ed Meds Online Discount Paypal viagra Ciao Finasteride Propecia Propecia Comparativa
Safest Place To Buy Viagra cialis Cash On Delivery Acticin Tab Usa Overseas Without Dr Approval Strep Throat Dosage Amoxicillin

#13 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 28/11/2017, 05:22

Precio Propecia En Farmacia Viagra Verkauf Privat In Wien Cheap Linisopril viagra online pharmacy Zithromax Otc Viagra Gratis A Desempleados
Commander Viagra Internet viagra Cialis And Viagra Packages La Viagra Y Sus Efectos Buy Levitra From India
Propecia Fertilita levitra 5mg Order Now Dutasteride 0.5mg Real Price Fedex Shipping Cheapest Propecia Sale Uk

#14 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 13822 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 29/11/2017, 15:33

Sale Original Propecia Viagra Online Legitimate Resources Impotencia Propecia levitra vs viagra vs cialis Online Apotheke Cialis 5mg

#15 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 03/12/2017, 19:31

Espana Comprar Kamagra Oral Jelly Prix Cialis Boite De 8 cialis buy online Comprar Cialis Espana
Zestril Lisinopril 4 Sale buy cialis Tadalafil Cheapest Price
Priligy Sito Ufficiale viagra Tab online isotretinoin delivered on saturday Florida Buy Propecia Affordable




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq