28173 sujets

CSS et mise en forme, CSS3

2 colonnes, l'une contenant des éléments en float

Bonjour,

Voici mon code :

<div style="float: left; width: 200px; height: 200px; border: 1px solid #F00;">
</div>

<div style="margin-left: 210px; height: 200px; border: 1px solid #0F0;">
  <div style="float: left;">Bonjour</div>
  <div style="float: left;">Bye</div>
  <div style="clear: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>


Mon problème (que vous constaterez sûrement) :
Le texte "Lorem ipsum..." passe sous la 1ère DIV car il est en "clear: left" alors que celle-ci est en "float: left".
Or, je veux que ce texte "Lorem ipsum" soit :
> A la fois SOUS les DIV qui le précéde ("Bonjour" et "Bye")
> A la fois qu'il reste dans sa colonne (sans passer sous la 1ère DIV)

Que faire chers collègues du CSS ? Smiley eek

Grand merci pour votre aide !
Aurel
Bon, je viens de trouver un truc un peu tordu...
Ça consiste à :
1. Placer la colonne de droite en 1er dans le HTML
2. La mettre en float: right
3. Lui donner une margin-left négative, égale à la largeur de la colonne de gauche

Qu'en pensez-vous ? (en tout cas, ça fonctionne sur Firefox).


<div style="float:right; margin-left: -200px; height: 200px; border: 1px solid #0F0;">
  <div style="float: left;">Bonjour</div>
  <div style="float: left;">Bye</div>
  <div style="clear: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div style="float: left; width: 200px; height: 200px; border: 1px solid #F00;">
</div>
Pour y voir plus clair, sépare bien ton css de ton html. Je n'ai rien modifié à ton code, puisque je n'ai pas trop compris ce que tu souhaites...

<style type="text/css">
#div1 {
	float: left;
	width: 200px;
	height: 200px;
	border: 1px solid #F00;
}

#div2 {
	margin-left: 210px; height: 200px; border: 1px solid #0F0;
}

#div3 {
	float: left;
}

#div4 {
	float: left;
}

#div5 {
	clear: left;
}
</style>


<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3">Bonjour</div>
	<div id="div4">Bye</div>
	<div id="div5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>


Là tu y verra déjà bien plus clair. Ensuite, n'oublie pas:
Le float:right & le clear:both qui force tes div à aller à la ligne
Modifié par Spharian (19 Nov 2011 - 21:59)
Bonjour,

Voici mon code :

<div style="float: left; width: 200px; height: 200px; border: 1px solid #F00;">
</div>

<div style="margin-left: 210px; height: 200px; border: 1px solid #0F0;">
  <div style="float: left;">Bonjour</div>
  <div style="float: left;">Bye</div>
  <div style="clear: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>


Mon problème (que vous constaterez sûrement) :
Le texte "Lorem ipsum..." passe sous la 1ère DIV car il est en "clear: left" alors que celle-ci est en "float: left".
Or, je veux que ce texte "Lorem ipsum" soit :
> A la fois SOUS les DIV qui le précéde ("Bonjour" et "Bye")
> A la fois qu'il reste dans sa colonne (sans passer sous la 1ère DIV)

Que faire chers collègues du CSS ? Smiley eek

Grand merci pour votre aide !
Aurel
Oups, désolé... double post involontaire, et impossible de le modifier / supprimer !

Spharian a écrit :
Pour y voir plus clair, sépare bien ton css de ton html. Je n'ai rien modifié à ton code, puisque je n'ai pas trop compris ce que tu souhaites...


Spharian, merci, je sais en effet qu'il vaut mieux séparer le CSS du HTML, c'était juste pour aller plus vite et permettre aux membres de tester rapidement Smiley cligne

Et pour compléter ton message, je préciserais même qu'il vaut encore mieux mettre le CSS dans un fichier à part... car dans ton exemple, le CSS est au final toujours dans le code HTML Smiley langue

Sinon, d'autres meilleures solutions ou pas ?
Sujet clos
Aller à