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:
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:
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
