28172 sujets

CSS et mise en forme, CSS3

Comment faire descendre un float:right si besoin ?

Bonjour à toutes et à tous,

j'aimerais repositionner (descendre d'une ou plusieurs lignes) mon div#droite lorsque le div#gauche empiète sur div#droite...
1ere cas de figure : #gauche et #droite sont sur une même ligne lorsque leur contenu est faible
2eme cas de figure : lorsque #gauche fait 500px et #droite 200px -> #droite descend d'une ligne
3eme cas de figure : lorsque #gauche fait une ligne +100px et #droite 200px -> #droite descend de 2 lignes.

En espérant m'être fait compris, je joint mon code de base :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
* {
	margin:0px;
	padding:0px;
}
div#zone {
	width:600px;
	background:#99CCFF;
}
div.gauche {
}
div.droite {
	float:right;
	background:#CCC;
}
</style>
</head>

<body>

<div id="zone">
	<div class="droite">blabla blabla</div>
	<div class="gauche"><p>Lorem ipsum dolor sit amet consectetuer eget Donec risus risus lacus. Tellus habitant lobortis Vivamus et justo orci ornare urna hac justo. Condimentum dolor quis vitae ante adipiscing adipiscing sagittis parturient justo tempus. Quis ipsum vel parturient consectetuer enim orci ac id sit nunc. Orci lacus Lorem augue quis nunc Nullam leo et justo vel. Maecenas urna In.</p></div>
</div>

</body>
</html>

Merci à ceux qui m'indiqueront ou non la possibilité de la chose... Smiley langue
@+ Smiley smile
Tchupacabra a écrit :
En espérant m'être fait compris

Heu... pas trop en fait.
Tu parles de div#gauche qui empièterait sur div#droite, mais dans ton code d'exemple c'est exactement l'inverse: div#droite, flottant, s'affiche par dessus div#gauche (non flottant, sans propriété clear) et repousse le contenu de div#gauche.

Peut-être pourrais-tu faire quelques mock-ups en images pour illustrer les différents états et les comportements souhaités?
En fait c'est un div flottant «à partir du bas». Smiley smile Problème: il n'y a pas de mécanisme prévu pour ça en CSS.

Si les suites de aaa, bbb et ccc sont bien un seul et même flot de texte, ça me semble impossible à réaliser. On peut à la rigueur positionner le bloc de droite en absolu (ou utiliser une image de fond si c'est de la déco), mais il faudra s'assurer qu'aucun texte ne viendra se placer dans le coin en bas à droite... ce qui est loin d'être évident.

Attends, je dis des bêtises... normalement, ça devrait marcher très bien avec un élément flottant placé à la fin de ton paragraphe de texte (dans le paragraphe, ou juste après si le paragraphe est en display: inline). Cf. ce test:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css" media="screen">
	div {
		position: relative;
		width: 500px;
		margin: 50px auto;
		border: 1px solid gray;
		font: 24px Verdana, sans-serif;
	}
	p {
		display: inline;
		margin: 0;
		background: royalblue;
	}
	span {
		float: right;
		width: 100px;
		height: 1em;
		background: red;
	}
	</style>
</head>

<body>

<div>
<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.<span></span></p>
</div>

</body>
</html>

Marche très bien (selon les spécifications) dans Safari 3 et Opera 9.
Ne marche pas (le flottant est une ligne trop bas) dans Firefox 3 et Internet Explorer 7.

Pas de solution à ma connaissance.
Sujet clos
Aller à