28172 sujets

CSS et mise en forme, CSS3

Positionnement de blos dans un conteneur

Bonjour, j'ai j'ai lu les différents guides de positionnement sur le site, mais je n'arrive pas à ce que les blocs se positionnent de cette façon automatiquement selon la taille des différents blocs

upload/23779-Sanstitre-.jpg

c'est-à-dire le 2 toujours à droite du 1, le 3 toujours au-dessous de 1, le 4 toujours à droite du 3 et au dessous du 2, etc ...

j'ai essayé avec les float: left et right mais le 2 est bien à droite du 1 et le 4 à droite du 3, mais le 4 ne remonte pas vers le 2 mais reste en dessous de la "ligne" du plus bas ici le 1

Voilà si vous aviez une idée
Merci
Modifié par kara_bou (11 Sep 2009 - 06:38)
Si la largeur des 2 colonnes est fixe et connue à l'avance, tu peux englober chaque boîte par une colonne, et ça fonctionnera.
Laurie-Anne a écrit :
Bonjour,

Si tu pouvais nous montrer ton code ce serait plus simple de t'aider.


Bonjour alors voici un exemple de code que j'ai essayé :

a écrit :

<html>
<head>

<style>

#conteneur {background-color: #;
position:absolute;
left: 50%;
top: 40px;
width: 700px;
height: 800px;
margin-left: -350px;
border: 1px solid #000000;
}

.body {
margin: 2px;
padding: 2px;
}

.float1 {
float: left;
width: 330px;
margin: 2px;
padding: 5px;
border: 1px solid #000000;

}

.float2 {
float: right;
width: 330px;
margin: 2px;
padding: 5px;
border: 1px solid #000000;

}

</style>


</head>


<body>

<div id="conteneur">

<div class="body">

<div class="float1">
<center>
1...
<br>
1...
<br>
1...
<br>
1...
<br>
1...
<br>
1...
<br>
1...
<br>
</center>
</div>

<div class="float2">
<center>
2...
<br>
2...
<br>
2...
<br>
2...
<br>
</center>
</div>

<div class="float1">
<center>
3...
<br>
3...
<br>
3...
<br>
3...
<br>
3...
<br>
3...
<br>
</center>
</div>

<div class="float2">
<center>
4...
<br>
4...
<br>
4...
<br>
</center>
</div>

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


le bloc 1 est bien à gauche, le bloc 2 à droite, mais le bloc 3 est à droite entre le 2 et le 4 au lieu d'être à gauche sous le bloc 1.
FlorentG a écrit :
Si la largeur des 2 colonnes est fixe et connue à l'avance, tu peux englober chaque boîte par une colonne, et ça fonctionnera.


Bonjour et merci, j'y avais pensé mais il se peut par exemple qu'à un moment, un bloc prenne toute la largeur du conteneur Smiley smile
La solutions proposée par FlorentG est je pense la plus simple à mettre en place. Dans le cas d'un bloc "tranversal" il suffit de fermer les deux blocs englobant et de les ré-ouvrir après.

Un peu de code pour expliquer, parce que même moi, je me comprend pas : 
<div class="gauche">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="droite">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="tout">
  ...
</div>
<div class="gauche">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="droite">
  <div></div>
  <div></div>
  <div></div>
</div>



.gauche{
  width:49%
  float:left;
}
.droite{
  width:49%
  float:right; /*ou left ou rien*/
}
.tout{
  width:100%;
  clear:both;
}
Laurie-Anne a écrit :
La solutions proposée par FlorentG est je pense la plus simple à mettre en place. Dans le cas d'un bloc "tranversal" il suffit de fermer les deux blocs englobant et de les ré-ouvrir après.

Un peu de code pour expliquer, parce que même moi, je me comprend pas :

...


OK je comprend bien merci beaucoup !!!
Sujet clos
Aller à