[résolu] Séparateur ajusté automatiquement au plus grand des 2 blocs

Bonjour,

Mon code CSS pour afficher 2 blocs cote à cote :

.centreActuHomeL
{
float:left ;
width:280px;
border-right: 1px dotted #70C2FA;

}

.centreActuHomeR
{
 width:280px;
}

Et dans le HTML les blocs sont appelés comme ceci :

<div class="centreActuHomeL">
Ipsum Lorem Lorem Ipsum Lorem LoremIpsum Lorem LoremIpsum Lorem Lorem
</div>

<div class="centreActuHomeR">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
</div>

Et le rendu ici :
http://root.jeromine.com/tmp/autoheight.htm

=>Question : comment faire pour que le séparateur pointillé s'ajuste au "plus haut des 2 blocs" ( qui peut être le bloc gauche OU BIEN le bloc droit).
Un grand merci
Modifié par nico1000 (05 Apr 2005 - 14:11)

euh... Tu devrais regarder ta page dans autre chose que IE, le résultat pourrait te surprendre

Pour ta bordure pointillée, je ne vois pas trop

salut,

la base c'est de faire flotter le 1er div à gauche et d'appliquer un margin-left au second div (margin-left correspondant à la largeur du 1er div) et de placer le pointillé sur le div le plus long.

Sinon, si tu veux qu'il y est toujours un pointillé quelque soit la longueur du contenu dans les 2 div, il faut appliquer une bordure à droite sur le div de gauche et une bordure à gauche sur le div de droite; et jouer sur le margin-left du second div (celui de droite) en fonction des padding des 2 div pour que les 2 pointillés se superpose toujours; par exemple:

.centreActuHomeL
{
float:left ;
width:280px;
border-right: 1px dotted #70C2FA;
padding:15px;
}
.centreActuHomeR
{
margin-left:310px; /*largeur du 1er div 280px + 30px de padding = 310*/
border-right: 1px dotted #70C2FA;
padding:15px;
}

si tu n'as pas de padding, c'est plus simple:

.centreActuHomeL
{
float:left ;
width:280px;
border-right: 1px dotted #70C2FA;
}
.centreActuHomeR
{
margin-left:280px;
border-right: 1px dotted #70C2FA;
}

Modifié par alex_br (04 Apr 2005 - 13:00)

alex_br a écrit :
salut,

si tu n'as pas de padding, c'est plus simple:

.centreActuHomeL
{
float:left ;
width:280px;
border-right: 1px dotted #70C2FA;
}
.centreActuHomeR
{
margin-left:280px;
border-right: 1px dotted #70C2FA;
}

=>grandiose, simple, et puissant.
Merci beaucoup.
N.