Deux DIV qui se chevauchent

Bonjour,

j'ai un petit problème de DIV dans le nouveau design de mon site. J'utilise actuellement une structure de ce type :

<div id"=header">
</div>

<div id="milieu">
<div id="leftdiv"></div>
<div id="content">Le forum</div>
<div id="rightdiv"></div>
<div id="mybottom"></div>
</div>

Le bloc milieu est positionné en relative. Les blocs "leftdiv" et "rightdiv" sont positionnés en absolute, le bloc "content" est positionné en relative, avec un margin-right pour ne pas qu'il "passe sous" rightdiv.

Ca fonctionne très bien, le problème est que lorsqu'une grosse image est postée, ou une longue chaine de caractères, le contenu de "content" passe sous "rightdiv", alors que je voudrais que "content" et donc "milieu" s'adaptent au contenu et s'élargissent automatiquement, quitte à ce qu'on se retrouve avec un scrolling horizontal pour afficher le site entier.


Si quelqu'un voit le problème....


Voici l'extrait du css :

#milieu
{
position:relative;
height: 100%;
top: 0px;
background-color: #FFFFFF;
min-width: 1002px;
}

#content
{
position: relative;
left: 145px;
top: 5px;
height: 100%;
min-height: 1200px;
margin-bottom: 20px;
margin-left: 5px;
margin-right: 295px;
}

#rightdiv
{
position: absolute;
top: -1px;
right: 0px;
width: 140px;
height: 100%;
background-image: url("images/fond-menu.jpg");
text-align: justify;
border: 1px solid black;
}

#leftdiv
{
position: absolute;
top: -1px;
width: 140px;
height: 100%;
left: 0px;
background-image: url("images/fond-menu.jpg");
border: 1px solid black;
}

Et une page d'exemple : http://test.mikafrance.com/index.php?page=test


Merci d'avance
Modifié par Ayuniverse (19 Jul 2009 - 12:39)

Déjà il ne faut pas positionner tes div en absolute. Ca leur donne une position précise qui provoque ce chevauchement du coup.

Retires donc les paramètres position de tes blocs #leftdiv, #content et #rightdiv et ajoute float:left; à #content et float:right; à #rightdiv pour qu'ils se positionnent horizontalement à la suite du premier et que #rightdiv soit calé sur la droite.

Ainsi tu auras le bon positionnement de tes bloc et ils se décalerons en fonction de la largeur de leurs contenus.

Et n'oublies pas de rajouter le paramètre overflow:hidden; à ton div #milieu afin d'empêcher les div positionnés en float de sortir de ce dernier

Merci pour ta réponse.

Le bloc "rightdiv" et une partie du contenu de "content" se placent en dessous de "leftdiv" quand je fais ca. Et puis le problème c'est que je veux que mes menus descendent aussi bas que le contenu de "content", or là lorsque le contenu descend plus bas que le menu il passe des deux côtés des menus.

Je sais pas si c'est clair

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Bonne continuation

Tu as la propriété word-wrap:break-word; qui coupe un mot trop long pour faire un retour à la ligne.
Pour les images le plus simple reste sûrement de leur mettre un max-height.
Modifié par moust (19 Jul 2009 - 12:18)

Merci pour ton aide. Je vais faire comme ca


Désolé pour la présentation, j'ai mis à jour mon post.