Problème de div et de css

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 8 Juin 2017.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    934
    J'aime reçus:
    15
    Salut à tous,

    J'ai une série d'onglets horizontal et en cliquant sur l'un deux, le texte de cet onglet s'affiche en dessous.

    Je souhaiterai mettre 2 div l'une à côté de l'autre dans le premier onglet parce que je vais devoir masquer la 2ième div afin que l'affichage sur les mobiles soit responsive mais il y a un bug ces 2 div ne s'affichent pas correctement :(

    J'ai passé pas mal de temps à chercher le problème mais là je sèche...

    Voici le bug d'affichage :
    [​IMG]

    Si je supprime les 2 div et que je met juste du texte dans l'onglet, ça s'affiche correctement :
    [​IMG]

    Voici le code html de mes onglets avec juste du texte dans le 1er onglet :
    Code:
    <div class="onglet">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1" name="details-monture">Détails Article</a></li>
                <li><a href="#tabs-2">Livraison</a></li>
                <li><a href="#tabs-3">Paiement</a></li>
                <li><a href="#tabs-4">Garanties</a></li>
                <li><a href="#tabs-5" name="avantages">Avantages Clients</a></li>
                <li><a href="#tabs-6">Atelier Joaillerie</a></li>            
                <li><a href="#tabs-7">Contact</a></li>        
           </ul>
            <div id="tabs-1">
            Voici le contenu de cet onglet<br><br>
            Ca s'affiche parfaitemen bien<br><br>
            Il n'y a aucune div, simplement du texte
            </div>
            <div id="tabs-2">
            </div>
            <div id="tabs-3">
            </div>
         etc...
    </div>
    
    Voici le code html de mes onglets avec mes 2 div supplémentaires :
    Code:
    <div class="onglet">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1" name="details-monture">Détails Article</a></li>
                <li><a href="#tabs-2">Livraison</a></li>
                <li><a href="#tabs-3">Paiement</a></li>
                <li><a href="#tabs-4">Garanties</a></li>
                <li><a href="#tabs-5" name="avantages">Avantages Clients</a></li>
                <li><a href="#tabs-6">Atelier Joaillerie</a></li>            
                <li><a href="#tabs-7">Contact</a></li>        
           </ul>
            <div id="tabs-1">
           <div class="bloc_bijou_details_gauche">
            Div 1<br><br>
            Voici le contenu de la div 1<br>
            Voici le contenu de la div 1<br>
            Voici le contenu de la div 1<br>
            </div>
            <div class="bloc_bijou_details_droite">
            Div 2<br><br>
            Voici le contenu de la div 2<br>
            Voici le contenu de la div 2<br>
            </div>        
            </div>
            <div id="tabs-2">
            </div>
            <div id="tabs-3">
            </div>
         etc...
    </div>
    
    Et voici mon code css :
    Code:
    .onglet{margin:0;margin-top:30px;margin-bottom:30px;padding:0;}
    .onglet ul li{font-size:0.83em;}
    .onglet select{font-size:0.8em;}
    #tabs1{padding:0;margin:0;margin-top:3px;}
    #tabs1 ul li{padding:0;margin:0;margin-right:3px;margin-top:2px;margin-bottom:-1px;font-size:0.8em;}
    #tabs1-1{padding:0;margin:0;}
    #tabs p{font-size:0.83em;}
    .bloc_bijou_details_gauche{float:left;position:relative;width:52%;border: 1px solid red;margin:3px;margin-right:5px;padding:0;}
    .bloc_bijou_details_droite{float:left;position:relative;width:45%;border: 1px solid red;margin:0;margin-top:3px;margin-bottom:3px;padding:0;}
    
    Qu'est-ce que je dois modifier pour afficher correctement mes 2 div dans mon 1er onglet ?

    Merci pour vos réponses et votre aide.
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    338
    Il suffit de mettre un clear après le 2° div (celui de droite <div class="bloc_bijou_details_droite">)
    Code:
    .clear {
        clear: both;
    }
    Code:
    <div class="clear"></div>
    Démo: https://jsfiddle.net/0dLL1f0h/
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    934
    J'aime reçus:
    15
    Un grand merci Spout ça marche nickel :)

    J'avais essayé le <div class="clear"></div> mais devant la première div :( et ça marchait pas, il fallait le mettre après la 2ième div....
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    338
    C'est ce que j'ai dit :mrgreen:
     
  5. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    667
    J'aime reçus:
    110
    C'est une solution qu'on utilisait quand il fallait être compatible avec IE6, mais on peut faire plus simple... et surtout, éviter d'ajouter des éléments inutiles dans le DOM. Il suffit d'ajouter la propriété overflow:auto à l'élément contentant les divs en float :

    Code:
    <style>
    .cadre {
      border: 1px solid #000;
      overflow: auto;
      padding: 5px;
    }
    
    .gauche, .droite {
      border: 1px solid red;
      float: left;
      width: 200px;
    }
    </style>
    <div class="cadre">
      <div class="gauche">FIX FIX FIX</div>
      <div class="droite">FIX FIX FIX</div>
    </div>
    
     
Chargement...
Similar Threads - Problème div css Forum Date
[HTML/CSS] Problème DIV Développement d'un site Web ou d'une appli mobile 21 Juillet 2011
Problème CSS à résoudre, superposition div/table Développement d'un site Web ou d'une appli mobile 4 Mars 2011
Probléme chevauchement texte et div en css Développement d'un site Web ou d'une appli mobile 1 Juin 2010
Problème CSS div et superposition Développement d'un site Web ou d'une appli mobile 6 Septembre 2008
Problème alignement d'un div en css Développement d'un site Web ou d'une appli mobile 26 Juin 2008
[CSS] petit problème DIV sous Firefox Développement d'un site Web ou d'une appli mobile 24 Janvier 2008
Probleme CSS avec IE6 (div coupé par son conteneur) Développement d'un site Web ou d'une appli mobile 16 Avril 2007
[Réglé] [CSS] Problème de largeur de "div" Développement d'un site Web ou d'une appli mobile 31 Août 2006
problème de div et de css... Développement d'un site Web ou d'une appli mobile 29 Juillet 2006
Problème avec un css et un div! Développement d'un site Web ou d'une appli mobile 18 Août 2005
Divers problèmes de Google Crawl et indexation Google, sitemaps 29 Novembre 2020
problème de boucle et de redirection de diverses anciennes pages URL Rewriting et .htaccess 4 Juin 2014
Problème de positionnement d'une div Développement d'un site Web ou d'une appli mobile 15 Décembre 2012
besoin d'aide sur probleme de div déployables ... Développement d'un site Web ou d'une appli mobile 9 Septembre 2012
Problème d'insertion d'une balise DIV Développement d'un site Web ou d'une appli mobile 8 Juin 2011
probleme de div avec google chrome Développement d'un site Web ou d'une appli mobile 14 Novembre 2009
Divers problèmes affichage sous IE Développement d'un site Web ou d'une appli mobile 16 Octobre 2009
probleme area="poly" et placement de div [RESOLU] Développement d'un site Web ou d'une appli mobile 8 Octobre 2009
Probleme de div, relative, absolute... Développement d'un site Web ou d'une appli mobile 29 Novembre 2008
Problème TinyMCE et div qui disparaît Développement d'un site Web ou d'une appli mobile 30 Juin 2008