HTML Redimensionnement

Résolu
Toorope -  
Bonjour à tous :)

Voilà, j'ai actuellement sur mon site une page représentée comme ceci:


Le problème est que lorsque je modifie la taille de la fenêtre, la div de gauche reste fixe et passe au dessus de la div principale, j'aimerais qu'elle se redimensionne automatiquement.
Je vous donne mon code:

Div de gauche: 


float:left;
margin-top: 120px;
max-width: 100%;
height: auto;


Div principale: 


font-family: Arial, Helvetica, Sans-Serif;
width : 50%; 
margin : auto; 
box-shadow: 1px 1px 25px #555;


Merci d'avance !

6 réponses

Résumé de la discussion

La problématique porte sur une div de gauche qui reste fixe et se superpose à la div principale lors du redimensionnement de la fenêtre. Selon la meilleure réponse, passer la div de gauche en position: relative, corriger ses marges et réduire sa largeur à 20% permet d'éviter qu'elle ne reste fixe et ne recouvre la div principale. D'autres échanges soulignent que le recours au float:left peut poser problème et proposent soit une révision du positionnement, soit l'utilisation d'une div globale pour structurer header, corps et footer. Une autre piste évoquée consiste à introduire une div globale et à centrer les éléments avec margin: auto, tout en examinant le comportement lorsque la colonne gauche contient des images.

Bobot (l’IA à votre service)
  1. Lerendra
    Essaye :

    Div de gauche: 

    position: relative;
margin : 120px 10px 0px 0px;
width : 20%;
height: auto;

    Div principale: 
    font-family: Arial, Helvetica, Sans-Serif;
width : 50%; 
margin : auto; 
box-shadow: 1px 1px 25px #555;


    Merci de me mettre un +1 si ma réponse vous à aidé :p
    1. Lapourax Contributeur
      +1 ça a l'air pas mal
    2. Toorope Auteur
      Je viens d'essayer, la div de gauche reste en haut à gauche mais décale ma div principale vers le bas, je ne comprend pas pourquoi elle agit sur la div principale :/
    3. Lapourax Contributeur
      parce que la div principale rentre pas à droite alors elle se place dessous
      faut diminuer les marges ou la taille d'une des deux div
    4. Toorope Auteur
      Même en diminuant les marges ou la talle d'une des deux div, la div principale reste en dessous :/
    5. Lerendra
      J'ai vu que tu avais mit un code pour intégrer google map ! Regarde si des valeurs du style : 
      width
      dans le code html soit à la même grandeur ou plus petit que ta grandeur du div !
  2. Lapourax Contributeur
    Il te faut définir la "width" de ta div de gauche en dynamique, à vue de nez vers les 20 25 %

    remplace 
    max-width: 100%;

    par 
    width: 20%;
    1. Toorope Auteur
      Bonjour Lapourax et merci pour ta réponse !

      Je viens d'essayer mais cela ne fonctionne pas :/
      Le 
      float:left;
      ne poserait-il pas problème ?
      1. Lerendra
        Bonjour !

        Pourquoi avoir dans "Div de Gauche" un "Max-width : 100%" ?

        Allez, je te donne un indice, dans ton code "Div Principale", le redimensionnement se fait avec 
        width : 50%; 
margin : auto;


        Donc essaye de rajouter un 
        margin : auto;


        Cordialement
        Lerendra
        2. Toorope Auteur
          Bonjour Lerendra !

          Merci pour ta réponse mais ta solution ne fonctionne pas non plus :/
          J'ai modifié mon code comme cela: 

          float:left;
width: 20%;
margin:auto;
height: auto;


          Et toujours le même problème, je précise que dans la div de gauche il n'y a que des images ;)
          1. Lapourax Contributeur
            Tu peu nous faire un screen histoire de voir concrètement à quoi ton appli ressemble et le bug de superposition ?

            Discussions similaires

            Apache2 accès à autre que /var/www/html/index.html
            merithes

            3 réponses
            Analyser éléments js d'une page web ?
            Angstrom82

            7 réponses
            Saut de lignes sans <br/>
            Rapi-shiny

            13 réponses
            Petit saut de ligne en HTML
            Aurore

            2 réponses
            <br> ou <br /> ou </br>
            corentin.93

            11 réponses