div: hauteur auto ?

Bonsoir,
J'essaie de créer,
dans un div "contenu" (limité aux 80% a droite de la page,
un autre div "annee", encadré, dans lequel je pourrais écrire sur toute
la largeur et/ou placer trois listes à puces dans trois colonnes
(gauche, milieu et...reste).
Ça prend forme doucement... mais je ne parviens pas à régler la hauteur
du div "annee" pour qu'il ne coupe pas les listes !

Merci pour le coup de main !

#contenu {
height: 100%;
margin-left: 20%;
overflow: auto;
color: #000000;
}
#annee{
position:relative;
width:90%;
height:auto;
border: 2px solid black;
padding : 5px;
}
#gauche {
position:relative;

float:left;
width:30%;
}
#milieu {
position:relative;

float:left;
width:30%;
}

Le 24/02/15 23:33, alainL a écrit :

Bonsoir,
J'essaie de créer,
dans un div "contenu" (limité aux 80% a droite de la page,
un autre div "annee", encadré, dans lequel je pourrais écrire sur toute
la largeur et/ou placer trois listes à puces dans trois colonnes
(gauche, milieu et...reste).
Ça prend forme doucement... mais je ne parviens pas à régler la hauteur
du div "annee" pour qu'il ne coupe pas les listes !

Merci pour le coup de main !

la colonne de droite va se mettre à droite mais aussi glisser sous les 2
autres

#contenu {
height: 100%;
margin-left: 20%;
overflow: auto;
color: #000000;
}
#annee{
position:relative;
width:90%;
height:auto;
border: 2px solid black;
padding : 5px;
}
#gauche {
position:relative;

pas besoin de la position

float:left;
width:30%;
}
#milieu {
position:relative;

pas besoin de la position

float:left;
width:30%;
}

.final { clear: left;
height:1px;margin:0;padding:0;border:none }


<div id="contenu>
<div id="annee">
<div id="gauche">
<ul><li>à gauche,<li>gauche!<li>mauvaise<li>troupe</ul>
</div>
<div id="milieu">
la perle dans l'écrin
</div>
<div>colonne droite<br>ou<br>le contenu sans colonne</div>
<div class="final"></div>
</div>
<p> du blabla pour voir</p>
</div>




Cordialement,

Le 25/02/2015 00:10, SAM a écrit :

Le 24/02/15 23:33, alainL a écrit :

Bonsoir,
J'essaie de créer,
dans un div "contenu" (limité aux 80% a droite de la page,
un autre div "annee", encadré, dans lequel je pourrais écrire sur toute
la largeur et/ou placer trois listes à puces dans trois colonnes
(gauche, milieu et...reste).
Ça prend forme doucement... mais je ne parviens pas à régler la hauteur
du div "annee" pour qu'il ne coupe pas les listes !

Merci Sam. J'ai réutilisé tout ça sur une page du site et testé

http://alos-sibas-abense.com/bulletins1.php

J'ai un petit souci avec "<li>", souci qui n'apparaît pas avec IE (pour
une fois !) mais visible avec Chrome et Ffx:
dans le dernier div de la page (année2014), le contenu de la colonne de
droite est décalé vers le haut. J'ai voulu mettre un <br> mais il décale
trop. Une <li> vide en bas pour voir n'est pas beau et ne corrige rien.

Le 25/02/15 11:33, alainL a écrit :

Le 25/02/2015 00:10, SAM a écrit :

Le 24/02/15 23:33, alainL a écrit :

Bonsoir,
J'essaie de créer,
dans un div "contenu" (limité aux 80% a droite de la page,
un autre div "annee", encadré, dans lequel je pourrais écrire sur
toute
la largeur et/ou placer trois listes à puces dans trois colonnes
(gauche, milieu et...reste).
Ça prend forme doucement... mais je ne parviens pas à régler la hauteur
du div "annee" pour qu'il ne coupe pas les listes !

>>>
(snip des correctifs)

Merci Sam. J'ai réutilisé tout ça sur une page du site et testé

http://alos-sibas-abense.com/bulletins1.php

J'ai un petit souci avec "<li>", souci qui n'apparaît pas avec IE (pour
une fois !) mais visible avec Chrome et Ffx:
dans le dernier div de la page (année2014), le contenu de la colonne de
droite est décalé vers le haut. J'ai voulu mettre un <br> mais il décale
trop. Une <li> vide en bas pour voir n'est pas beau et ne corrige rien.

#milieu ul,
#gauche ul { margin: 0; }

par exepmple



Attention !
quand on étroitise ça cafouille avec le div de droite !


Cordialement,

Le margin 0 ne change rien.

Je croyais m'en sortir avec un margin-top
27px à la colonne de droite. C'est sans doute un peu bancale

Maintenant, c'est Monsieur Validator qui me reproche les multiples
utilisations du div annee. Je le trouve bien susceptible ce type :-))

Le 25/02/15 15:28, alainL a écrit :

Le margin 0 ne change rien.

il faut placer le correctif *à la place* de l'ancien ou *après* !

???
Je re-regarde

Je croyais m'en sortir avec un margin-top
27px à la colonne de droite. C'est sans doute un peu bancale

Non, c'est très TRÈS bancal !!
si on bricole pour que ça marche c'est qu'on est sur la mauvaise voie
Revoir plus haut ou autrement.

Maintenant, c'est Monsieur Validator qui me reproche les multiples
utilisations du div annee. Je le trouve bien susceptible ce type :-))

Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!

Le 25/02/2015 17:57, SAM a écrit :

Le 25/02/15 15:28, alainL a écrit :

Le margin 0 ne change rien.

il faut placer le correctif *à la place* de l'ancien ou *après* !

???
Je re-regarde

Je croyais m'en sortir avec un margin-top
27px à la colonne de droite. C'est sans doute un peu bancale

Non, c'est très TRÈS bancal !!
si on bricole pour que ça marche c'est qu'on est sur la mauvaise voie
Revoir plus haut ou autrement.

Maintenant, c'est Monsieur Validator qui me reproche les multiples
utilisations du div annee. Je le trouve bien susceptible ce type :-))

Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!

Bon, j'ai ajouté #gauche ul,#milieu ul {margin : 0} C'était OK pour
l'alignement mais IE me bouffait les puces dans ces deux colonnes. En
corrigeant avec margin-top tout va bien...........

Je me demande si je ne vais pas vexer le monsieur en question et garder mes
div. Quel est le risque ???
Sinon, que me conseillerais-tu ?

Cordialement

Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!

SAM a écrit le 25/02/2015 17:57 :

Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!

même en "class" ?

Le 25/02/15 20:08, docanski a écrit :

SAM a écrit le 25/02/2015 17:57 :

Il ne peut il y avoir qu'UN *et un seul* div de même nom dans un fichier
web !!!

même en "class" ?

Heu !!!!!

Je voulais dire de même "ID" !!!!

Il ne peut il y avoir qu'UN *et un seul* div de même ID dans un fichier


V'là que je m'icromouds tout seul !!!!!


Cordialement,