Placer une paragraphe au bas d'une div

Meuhfin
Les bases HTML/CSS

Bonsoir à tous,

Je suis en train de m'acharner depuis quelques temps sur ce point là, je n'arrive pas à placer un paragraphe au bas d'une div. En gros, je voudrais dire à mon pragraphe : Tu le places à 5px du bottom.

Voici déjà ce que j'ai fait :


.col_1-4{
    width: 252px;
    height: 224px;
    float: left;
    border-left: 1px solid rgba(255,185,0,0.5);
}

p{
    display: block;
    position: relative;
    text-align: center;
    color: #d4d4d4;
    font-size: 0.7em;
    margin: 5px 0;
    bottom: 0;
}

Voilà donc mon problème. Merci d'avance pour vos solutions.

Meuhfin

4 réponses

Sankaman
Réponse acceptée

Afin que ton paragraphe soit toujours placer en bas de ton conteneur, tu peux mettre ce dernier en "position: relative", puis mettre le paragraphe en "position:absolute". Tu pourras alors placer ton paragraphe en fonction du conteneur.
J'ai fait un JSFiddle pour que tu vois :
https://jsfiddle.net/Sanka/1v3w48yp/

En espérant t'avoir aider ;)

Sankaman
Réponse acceptée

Tu peux rajouter "width: 100%" à ton paragraphe afin qu'il prenne toute la largeur. Lors du passage en absolue, ton paragraphe ne prend plus tout la largeur du bloc mais seulement la place nécessaire à l'affichage.

Ton bloc prendra, dans ce cas là, toute la largeur du bloc. Si tu ne veux pas que cela soit le cas, tu peux centrer horizontalement le paragraphe, il y a un tuto pour cela : http://www.grafikart.fr/tutoriels/html-css/centrer-css-614

Meuhfin
Auteur

Franchement merci, tu as résolu, mon problème :), mais un autre vient de survenir en règlant ce problème. Malgré mon text-align: center, le contenu n'est plus centré

Meuhfin
Auteur

Franchement, merci d'avoir résolu mes deux problèmes ;)