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 :

Aligné verticalement deux div


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 11
    Par défaut Aligné verticalement deux div
    Bonjour,

    Voici mon soucis :

    Sur un de mes site, j'affiche en page d'accueil 6 news, deux cote à cote sur 3 lignes



    Tous se passe bien quand les articles font la meme hauteur.
    Par contre quand ce n'est pas le cas, comme sur la page 2

    Ca rend vraiment pas bien..

    Comment pourrais je faire pour aligner mes divs verticalement ?

    Je vous mets le code d'en ce moment :

    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
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    <div id="main">
    		<div id="ZoneArticle1">
    			<?php $plxShow->plxMotor->plxRecord_arts->loop(); ?>
    			 <div class="colLeft">
    					<p class="date"><?php $plxShow->artDate('<span>#num_day</span><br />#num_month | #num_year(2)'); ?></p>
    					<h2><?php $plxShow->artTitle(); ?></h2>
    					<p><?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> </p>
    					<?php $plxShow->artChapo(); ?>
    					<p class="info_bottom"> <?php eval($plxShow->callHook('MySocialButtons')) ?></span></p>
    			 </div>
     
    			<?php $plxShow->plxMotor->plxRecord_arts->loop(); ?>
    			<div class="colRight">
    					<p class="date"><?php $plxShow->artDate('<span>#num_day</span><br />#num_month | #num_year(2)'); ?></p>
    					<h2><?php $plxShow->artTitle(); ?></h2>
    					<p><?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> </p>
    					<?php $plxShow->artChapo(); ?>
    					<p class="info_bottom"> <?php eval($plxShow->callHook('MySocialButtons')) ?></span></p>
    			</div>
    		</div>
    		<div id="ZoneArticle2">
    			<?php $plxShow->plxMotor->plxRecord_arts->loop(); ?>
    			<div class="colLeft">
    					<p class="date"><?php $plxShow->artDate('<span>#num_day</span><br />#num_month | #num_year(2)'); ?></p>
    					<h2><?php $plxShow->artTitle(); ?></h2>
    					<p><?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> </p>
    					<?php $plxShow->artChapo(); ?>
    					<p class="info_bottom"> <?php eval($plxShow->callHook('MySocialButtons')) ?></span></p>
    			</div>
     
    			<?php $plxShow->plxMotor->plxRecord_arts->loop(); ?>
    			<div class="colRight">
    					<p class="date"><?php $plxShow->artDate('<span>#num_day</span><br />#num_month | #num_year(2)'); ?></p>
    					<h2><?php $plxShow->artTitle(); ?></h2>
    					<p><?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> </p>
    					<?php $plxShow->artChapo(); ?>
    					<p class="info_bottom"> <?php eval($plxShow->callHook('MySocialButtons')) ?></span></p>
    			</div>
    		</div>
    		<div id="ZoneArticle3">
    			<?php $plxShow->plxMotor->plxRecord_arts->loop(); ?>
    			<div class="colLeft">
    					<p class="date"><?php $plxShow->artDate('<span>#num_day</span><br />#num_month | #num_year(2)'); ?></p>
    					<h2><?php $plxShow->artTitle(); ?></h2>
    					<p><?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> </p>
    					<?php $plxShow->artChapo(); ?>
    					<p class="info_bottom"> <?php eval($plxShow->callHook('MySocialButtons')) ?></span></p>
    			</div>
     
    			<?php $plxShow->plxMotor->plxRecord_arts->loop(); ?>
    			<div class="colRight">
    					<p class="date"><?php $plxShow->artDate('<span>#num_day</span><br />#num_month | #num_year(2)'); ?></p>
    					<h2><?php $plxShow->artTitle(); ?></h2>
    					<p><?php $plxShow->lang('WRITTEN_BY') ?> <?php $plxShow->artAuthor() ?> </p>
    					<?php $plxShow->artChapo(); ?>
    					<p class="info_bottom"> <?php eval($plxShow->callHook('MySocialButtons')) ?></span></p>
    			</div>
    		</div>
     
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .colLeft {
     
    	float: left;
    	width: 450px;
    	margin: 0 22px 0px 0;
    }
    .colRight {
     
    	float: right;
    	width: 450px;
    	margin: 0 22px 0px 0;
    }
    MErci d'avance,

    Zeuth

  2. #2
    Membre éprouvé
    Avatar de Emyleen
    Femme Profil pro
    Webmaster
    Inscrit en
    Mars 2010
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 40
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2010
    Messages : 151
    Par défaut
    Bonjour!

    Essaye de rajouter une <div style="clear:both;"></div> entre chacune de tes zones article ou alors la propriété clear:both dans leur css, cela devrait permettre de les aligner

  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 11
    Par défaut
    Eh ben merci.. ça fonctionne

    J'me sens un peu con la :'(

    Un énorme Merci Emyleen

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Aligner verticalement une div
    Par popy67 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 22/02/2010, 17h51
  2. Image et texte sur la même ligne : aligner verticalement les deux ?
    Par titoumimi dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 25/01/2007, 13h47
  3. [XHTML] Alignement de deux div
    Par Invité dans le forum Balisage (X)HTML et validation W3C
    Réponses: 14
    Dernier message: 29/06/2006, 21h03
  4. [Débutant] Aligner deux divs sur une ligne avec inline
    Par Braz dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 09/03/2006, 10h52
  5. Aligner verticalement un <div>
    Par Michaël dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 07/12/2005, 09h12

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