Alignement en bas de colonnes multiples

**iStuffs** · 21/05/2014, 11h23

Bonjour, j'aurai besoin d'un petit coup de pouce.
Je souhaite avoir un présentation en colonne où un bouton est positionné en bas.
Le problème c'est que le contenu dans la colonne va changer. Ce sont des modules promotionnels. Donc je ne connais pas à l'avance la hauteur de ces colonnes.
Voila déjà le fruit de ma réflexion.

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
<html>
<head>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
.wrapper {
	display: block;
	position: relative;
	overflow: auto;
 
}
.col1, .col2 {
	display: block;
	position: relative;
	width: 49%;
	height: 100%;
	border: 1px red solid;
	clear: none;
	float: left;
	padding-bottom: 30px;
}
 
.read_more {
	display: block;
	height: 30px;
	background: #333;
	color: #eee;
	position: absolute;
	bottom:0px;
}
</style>
 
 
</head>
	<body>
		<div class="wrapper">
			<div class="col1">Column 1
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			<span class="read_more">bottom align</span></div>
 
			<div class="col2">Column 2
			<span class="read_more">bottom align</span></div>
		</div>
	</body>
</html>

Le div.wrapper a un overflow:auto; pour avoir une taille car son contenu est en float. Quand je l'inspecte il a bien une height.
Mes .col1 et .col2 ont un padding-bottom pour laisser la place a mon bouton .read_more.
Les colonnes ont un position: relative; pour permettre d'être l'origine de la position absolute des bouton.
Ce qui ne fonctionne pas comme je l'espérais c'est le height:100% des .col1 et .col2 qui prend comme référence la hauteur de la frame et non du div.wrapper.

Merci d'avance a tous ceux qui prennent le temps de m'aider.

**rodolphebrd** · 21/05/2014, 15h58

Bonjour,

Que voulez-vous exactement ?

Des colonnes de hauteur identiques ?

Display: block, pour des éléments block ça sert à rien.

Si j'ai compris la question avec le modèle tabulaire on obtient ça :http://codepen.io/rodolpheb/pen/HrtuI

Alignement en bas de colonnes multiples

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager