[résolu] Les divs qui s'empilent

Bonjour!

Souvent, lorsque je me fais des designs depuis que je me suis mis au XHTML, et que j'ai, supposons, 2 divs un à coté de l'autre, lorsque je réduit la fenêtre les deux divs s'empilent. Y-a-t'il une façon pour éviter ceci? Je préfèrerais qu'une barre de défilement horizontale apparaisse au lieu de détruire le design

Merci!
Modifié par DarkMalow (02 Aug 2005 - 22:13)

Ne pas utiliser la position absolue. Se servir des flottants, par exemple.

Pourtant c'est bien ce que j'ai, je crois.

<div id="container">
<div id="sous_menu">
</div>
<div id="information">
</div>
<div id="main">
</div>
</div>

#sous_menu {
  width: 200px;
  background-image: url(../images/sous_menu_bg.gif);
  background-position: bottom left;
  background-repeat: no-repeat;
  padding: 10px 0 95px 0;
  float: left;
}

#main {
  padding: 0 5px 0 5px;
  margin-left: 200px;
  margin-right: 175px;
  height: 1px;
}

#information {
  width: 175px;
  float: right;
  padding: 0;
}

Dans cet exemple-ci, le div du milieu va se positionner sous le div de droite dès que la largeur du navigateur devient trop petite.

Je n'ai aucun positionnement en absolut, et les divs de gauche et de drotie sont positionnés avec des float.

Ah... Cest ton " les deux divs s'empilent" qui prêtait à confusion : le terme d'empilement est d'ordinaire réservé à la superposition de div, liée au positionement absolu.

Ce qui se produit avec tes flottants est normal : c'est le comportement recherché. Si la largeur de la zone d'affichage ou de la boîte conteneur n'est pas suffisante pour les deux flottants se placent côte à côte, le second se place en dessous du premier.

Si tu préfère les voir rester côte à côté, il te suffit de donner une largeur fixe suffisante à leur conteneur (#container), indépendante de la largeur de la zone d'affichage (l'écran du navigateur).

Désolé d'avoir porté confusion

Alors j'imagine que ce que je veux faire n'est pas possible, car ma page doit garder une largeur variable dépendant de la résolution / taille du navigateur.

Pour le moment le #container est comme ceci:

margin-left: 5%;
margin-right: 5%;

J'ai essayé avec une largeur fixe et en effet, le div du milieu ne va plus sous celui de droite, mais la page reste constamment à la même largeur, ce qui en répond pas aux exigences

Alors j'imagine que la seule chose à faire c'est d'espérer que personne ne réduira la largeur de la fenêtre sous ~700px

DarkMalow a écrit :

Alors j'imagine que la seule chose à faire c'est d'espérer que personne ne réduira la largeur de la fenêtre sous ~700px

Ou de donner une largeur minimale au conteneur, soi avec min-width et la bidouille appropriée pour IE (voir min-height dans le blog), ou encore mettre un élément d'une largeur X dans le conteneur qui servira à conserver une largeur minimale.

Donc après avoir lu cette solution, je me suis empressé de l'essayer! mais je crois que ça en marche pas... Mais p-e que je ne m'y prend pas bien.

J'ai rajouté

<div id="blabla"></div>

à l'intérieur de mon #container, à la fin. Puis j'ai rajouté à mon CSS:

#blabla {
  width: 700px;
}

html>body #blabla {
  width: auto;
  min-height: 700px;
}

Je me suis fié à ceci: http://blog.alsacreations.com/2004/08/17/54-min-height-sur-internet-explorer, ce qui est le lien dont tu me parlais je crois bien!

Mais non, ce qui se passe en fait, c'est que la barre de défilement apparait effectivement à 700px maintenant, mais le div #main continue de se rétrécir jusqu'à ce qu'il aille se placer sous le menu de droite, comme avant

Est-ce que j'ai fait quelque chose de mal dans le code?

Met plutôt le min-width (et sa bidouille) pour le div #container. Ca devrait aller.
Modifié par Merkel (02 Aug 2005 - 22:12)

Wahoo! Miracle

En essayant plusieurs choses ridicules j,ais oudainement eu l'idée de mettre height: 100%; à mon #container. Maintenant la bidouille que tu m'as expliqué, Merkel, fonctionne

Merci à Laurent Denis et à Merkel pour cette aide!

C'est quoi le code que tu as utilisé au final ? Ca nous permettrait à la fois de vérifier et ca pourrait servir aux autres.

Merci

J'avoue que ca pourrait etre bien Alors voilà:

<div id="container">
<div id="sous_menu">
</div>
<div id="information">
</div>
<div id="main">
</div>
<div id="bidouille"></div>
</div>

#container {
  margin-left: 5%;
  margin-right: 5%;
  padding: 0;
  height: 100%;
  min-width: 640px;
}

#sous_menu {
  width: 200px;
  background-image: url(../images/sous_menu_bg.gif);
  background-position: bottom left;
  background-repeat: no-repeat;
  padding: 10px 0 95px 0;
  float: left;
}

#main {
  padding: 0 5px 0 5px;
  margin-left: 200px;
  margin-right: 175px;
  height: 1px;
}

#information {
  width: 175px;
  float: right;
  padding: 0;
}

#bidouille {
  width: 640px;
}

Par contre ca semble fonctionner exactement comme je veux que dans Internet Explorer Mais bon, je vais m'occuper des autres navigateurs plus tard, je crois bien que je vais faire une feuille de style pour chacun au lieu d'essayer d'en faire 1 qui marche pour tous.

EDIT: Bah maintenant ca marche autant sur IE que sur FF. J'édite le code.
Modifié par DarkMalow (03 Aug 2005 - 15:33)