IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Alignement de 3 div horizontales avec 2 div en largeur 100%


Sujet :

Positionnement en CSS

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 7
    Points : 8
    Points
    8
    Par défaut Alignement de 3 div horizontales avec 2 div en largeur 100%
    J'aimerai aligner horizontalement trois <div> celui du milieux est de largeur fixe 990px par exemple et les autres j'aimerai qu'il prennent la largeur de 100% de l'espace restant a droite et a gauche respectivement.

    Illustration :

    <---- Div 1----><---- Div 2----><---- Div 3---->
    <---- 100 %----><---- 990px----><---- 100 %---->
    quelqu'un peut m'aider je sèche la.

  2. #2
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 31
    Points : 18
    Points
    18
    Par défaut
    Bonsoir c'est un sujet délicat, le problème est l'interpretation des balises qui est disons pas cool chez ie (de 5 à l'inf).

    Pour le moment je reste sur cette solution qui à l'inconvenient de parfois faire des colonnes de mauvaise taille sur ie8...

    Le css :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
     
    <style type="text/css">
    .table{
    	width:100%;
    	display:table;
    }
     
    .cell1{
    	background-color:blue;
    	display:table-cell;
    }
     
    .cell2{
    	width:990px;
    	background-color:red;
    	display:table-cell;
    }
     
    .cell3{
    	background-color:orange;
    	display:table-cell;
    }
     
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .cell1, .cell3 {
    	width:expression((100 - (100 * 990 / window.document.body.clientWidth )) / 2 + "%");
    	float:left;
    }
     
    .cell2{
    	float:left;
    }
     
    </style>
    <![endif]-->

    Le html de test :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="table" id="table">
    		<div class="cell1" >
     
    		</div>
     
    		<div class="cell2">
    		</div>
    		<div class="cell3">
     
    		</div>
    </div>


    Si j'ai une illumination concernant ie8 je reviendrais le dire içi.

Discussions similaires

  1. Sliding div horizontalement avec des fleches
    Par mlazaro dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 06/03/2015, 23h16
  2. positionnement de deux div horizontales dans un div conteneur
    Par marry dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 16/05/2010, 13h00
  3. Réponses: 1
    Dernier message: 08/09/2007, 16h16
  4. Problème alignement avec trois div
    Par finalfx dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 20/05/2006, 18h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo