CSS: pub en absolute dans div contenant du texte

freestyle83 · 31 Mai 2013

Bonjour à tous,

Le titre est assez explicite :

Je voudrais positionner ma pub en absolute dans un div qui contient du text.

Pour le positionnement pas de problème, je le met bien là ou il faut.
L'ennuie c'est que le texte continue son chemin en dessous et j'aimerais qu'il fasse le tour de la pub.

Voici un exemple sur une page banale :

<div id="bloc normal" style=" width:900px; height: auto; background: #cccccc;"> blablabla blabla blabla [...]blabalba
<div id="bloc-absolute" style="width: 200px; height:200px; border:2px solid red; position: absolute; top:200px; float: left; "></div>

ça fait une heure que je cherche sur internet, et soit les topics n'ont pas de réponse, soit ce serait apparement "impossible".

Auriez-vous une idée?

Merci

Supermaury · 31 Mai 2013

Bonjour.

Je ne sais pas si c'est le résultat que tu veux (dans l'exemple, le bloc de pub est aligné à gauche), mais en grugeant un peu, on peut y arriver. Ca marche à partir d'IE8.

@++

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			.principal {
				width:900px;
				height:auto;
				background:#ccc
			}
			.cheat {
				float:left;
				height:100px; /*la hauteur où tu souhaite positionner ton bloc*/
				width:O
			}
			.bloc {
				width:200px;
				height:200px;
				border:1px solid #ff0000;
				clear:left;
				float:left;
				margin:5px 10px
			}
		</style>
	</head>
	<body>
		<div class="principal">
			<div class="cheat"></div>
			<div class="bloc"></div>
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
			blabla blabla blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla  blabla blabla 
		</div>
	</body>
</html>

freestyle83 · 31 Mai 2013

Bonjour,

Merci de m'avoir répondu.
En effet je viens de tester et à ma grande surprise ça marche.
J'ai pas compris l'idée, il n'y ni position absolute ni relative... et pourtant ça fonctionne juste avec une barre de 0 par la hauteur désiré.

Pourrais-tu m'expliquer stp?
En tout cas merci vraiment. C'est exactement ce que je voulais.

Supermaury · 31 Mai 2013

Bonjour.

Content d'avoir pu t'aider.

Bah en gros, il n'y a rien de compliqué. On crée un div invisible de la hauteur désirée avec un float:left. On annule l'effet float pour le bloc avec le clear, comme ça il passe en dessous. On remet ensuite un float:left sur le bloc... et là le texte suit bêtement ce qu'on lui dit à savoir 2 float:left et il se colle à l'ensemble.

@++

freestyle83 · 31 Mai 2013

Ah ben oui :wink: dit comme ça c'est tout bête. Fallait y penser !! 8)

Merci beaucoup pour ton aide