Problème de positionnement de 2 divs dans une div

Bonjour à tou(te)s,

j'essaie de positionner 2 div l'une en face de l'autre et qu'elles soient aligner dans un bloc div.
ma contrainte est la suivante : une des deux div sera "extensible" et "étirera" donc sa div parent tout en repoussant une div situé hors bloc parent...
pour bien me faire comprendre j'ai fais un schéma :


voici mon css:

div a { padding-top: 0.30em; background:white; position:relative;}
div a.1 style="margin-left:20px;margin-top:10px;width:385px;">
fin div a.1
div a.2  style="width: 580px; margin-left: 385px;position:relative; top:-530px;">
fin div a.2
fin div a

j'ai tout essayé, un float sur l'un des 2 div me le fait ou font sortir du flux, et la div b se retrouve "écrasé", idem en position absolute... ce qui est logique

je suis perdu, j'ai tenté toute la journée de faire quelques chose mais le résultat ne me convient pas.
mettre a.2 en relative et "a" en relative aussi me donne satisfaction, mise à part que je suis obligé de mettre un top négatif pour remonter a.2, le hic c'est que sur différents navigateurs y a un décalage notable
de plus, la div "a" à tendance à mettre un espace assez important entre le bottom div a.1 et a.2 et div b...

j'espère avoir été assez claire

un grand merci pour votre aide !!!

Bonjour !

Essaies ça :
Div a contient a1, a2 et b
a1 et a2 en float:left
b en position relative ou absolue avec bottom:0 sans oublier clear:both.

Ou encore, je pense que ça fonctionne si tu mets juste clear:both pour ta div b.

Tiens-nous au courant

jojo
Modifié par jojoledemago (07 Jul 2011 - 19:31)

Bonsoir à toutes et à tous,

il n'y a aucune difficulté pour le header (l'en-tête) et le footer (le pied de page).

Par contre, je ne comprends pas bien ce que tu veux faire avec tes deux colonnes (gauche et droite).

En principe, une colonne a une largeur fixe. Mais ce que j'ignore dans ton problème est de savoir si le texte est fixé une fois pour toute par toi dans la balise <div> de chaque colonne ou si le texte a une volumétrie variable que tu ne maitrise pas car ce texte vient d'ailleurs.

Donc si une colonne contient plus d'information que l'autre, tu désires que la fin des deux colonnes soit à la même hauteur. La solution est d'ajuster la largeur de chaque colonne pour avoir cet effet.

Si tu ne désires pas cette solution, il faut procéder par un programme en javascript !

@+

Bonjour et merci pour vos réponses !

@jojo :
J'ai mis la div a englobante a.1, a.2 et b (j'ai enlevé les position relative de a.2) et mis un float:left à a.1 et a.2 b est en clear:both
résultat : la hauteur de a.1 s'agrandit, et a.2 est en footer de a.1, lorsque je charge a.2, l'élément s'affiche comme suit :


@Artemus24 et jojo :

a.1 est un div avec des liens qui appellent des textes de tailles différentes dans a.2.
a.2 s'agrandit donc selon la longueur des textes

voilà ce que ça donne après chargement des textes :


je ne désire pas forcément que la fin des colonnes soit à la même hauteur, pas du tout même, ce qui me pose problème c'est de pouvoir les "aligner" en top sans utiliser un top:-350px...

merci pour votre aide

Reposte ton css et ton html

Bonsoir bga_o,

je crois que nous ne sommes pas sur la même longueur d'onde ! Et malgré tes explications, je ne comprends pas ce que tu recherches à faire. J'ai bien compris que la div a.1 contient un menu et la div a.2 est le réceptacle du résultat de ce lien. Mais ce que je ne comprends pas c'est la partie variable de ces deux boites.

Est-ce que la div a.1 a toujours une largeur et une hauteur fixe ?
Est-ce que la div a.2 a toujours une largeur fixe mais une hauteur variable ?
Répond à ces deux questions !

Je vais te donner un petit bout de code HTML qui positionne cinq boites comme suite :

1) le conteneur à une largeur et une hauteur fixe englobant les autres boites.
2) la boite header prend toute la largeur du conteneur.
3) la boite left se positionne à gauche et à une largeur plus petite que le conteneur.
4) la boite right se positionne à droite et à une largeur plus petite que le conteneur.
La somme de la largeur de la boite gauche et de la boite droite est égale à la largeur du conteneur. De ce fait, la voite gauche et la boite droite sont côte à côte.
5) la boite footer prend toute la largeur du conteneur.

Les boites sont les unes à coté des autres et en fonction de la place restante soit elles se mettent à cotés (ici à droite puisque l'on fait un float : left) soit elles se positionnent en dessous.

Dans mon exemple le conteneur fait 500 X 500 pixels. Tant qu'il y a de la place, toutes les boites rentrent sinon il y a débordement. Ici, la hauteur de toutes les boites est variable sauf le conteneur qui a une hauteur plus grande. C'est pour cela que tu vois l'arrière plan en blanc.

Maintenant si tu places beaucoup du "bla bla bla" dans la boite de droite alors cette boite ce rallonge en hauteur en provoque un déséquilibre avec la boite gauche qui sera plus courte. Mais toutes ces boites entrent quand même dans le conteneur.

Voici le code :

<html>
<head>
<title>test</title>
<style type="text/css">
* {
		margin				: 0;
		border				: none;
		padding				: 0;
}

body {
		background-color	: grey;
}

#content {
		position			: absolute;
		top					: 50px;
		left				: 200px;

		background-color	: white;
		width				: 500px;
		height				: 500px;
}

#content h1 {
		text-align			: center;
}

#content > #header {
		background-color	: red;
		width				: 500px;
		float				: left;

}

#content > #left {
		background-color	: orange;
		width				: 200px;
		float				: left;
}

#content > #right {
		background-color	: yellow;
		width				: 300px;
		float				: left;
}

#content > #footer {
		background-color	: blue;
		width				: 500px;
		float				: left;
}
</style>
</head>

<body>
<div id="content">
	<div id="header"><h1>Header</h1></div>
	<div id="left"><h1>Left</h1>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
	<div id="right"><h1>Right</h1> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
	<div id="footer"><h1>Footer</h1></div>
</div>
</body>
</html>

ben... c'est exactement ça... oui oui... pourquoi faire simple quand on peut faire compliqué ?

je vais faire tout mes arrangements et je vous tiens au jus

un grand merci en tout cas !

Après test :
Tout devrait fonctionner, le problème ne se situerait plus au niveau CSS, mais semblerait venir du moteur de SPIP qui me génère une div dans a.1 et termine a.1 apres a.2...

un joyeux bordel, pour ceux que ça intéresse la suite de la discussion est par là :forum spip "div ajax qui seme la pagaille lorsque spip genere le html"

merci à vous tous
Modifié par bga_O (08 Jul 2011 - 13:09)

Bonjour à toutes et à tous,

en somme ton anomalie est un problème d'encapsulation !

Une balise <div> est avant tout un objet. Cet objet fils, tu peux le rattacher à un autre objet qui, celui-ci, deviendra le parent de cette objet fils. Cela peut se faire directement en JavaScript ou par un INCLUDE de code HTML à inclure à un endroit particulier de ton code HTML.

Dans le cas du JavaScript, l'astuce que j'avais utilisé consistait en un menu, qui était toujours le même mais venait se placer en tête d'une boite selon la sélection précédente. En somme dans la boite père je faisait apparaitre ou disparaitre cette objet fils à mon gré.

Mais il faut garder la souplesse et le respect du code HTML pour que cela fonctionne correctement. Donc ton objet fils aura une structure du genre <div id="fils"> ... </div> avec un code CSS associé et ayant les caractéristiques demandées. Il se placera dans une structure du genre <div id="pere"> ... </div> soit à la fin de toutes les boites déjà existantes. Et le tour est joué.

Donc à bien te comprendre, quelque part dans ton code , tu n'as pas respecté l'encapsulation. Et du coup le "bordel" s'est installé !

@+
Modifié par Artemus24 (08 Jul 2011 - 13:55)

C'est tout à fait exact... je ne sais pas si je me complique à fond, mais la base du problème était là....
SPIP génère un bloc pour ajax automatiquement sans que je me sois rendu compte... je dois alors composer avec mes div pour éviter des chevauchements et gérer l'encapsulation, merci encore !!!