Prob pour créer 2 blocs contigus avec txt aligné en bas

**Greg12345** · 24/05/2010, 12h38

Bonjour,

Je débute en CSS et je suis pour le moment confronté au probleme suivant:

Ma page consiste en un élément "div" "top border" en haut sur toute la largeur (fine bordure)
Juste en dessous à gauche mon div "LeftHeader" qui contient mon Titre/logo et mon Slogan et à droite mon div "RightHeader" qui contient mon adresse e-mail

Le problème est que mon DIV "LeftHeader" a 2 lignes (une pour le logo et une autre pour le slogan) et mon div "RightHeader" n'a qu'une seule ligne, du coup les 2 DIV ont des hauteurs différentes et sont aligné verticalement par la haut

J'ai pensé à créer les 2 DIV avec une même hauteur fixe mais je pense que ce ne serait pas la meilleure solution.

J'aimerais donc savoir s'il était possible d'aligner les DIV verticalement vers le bas.
Comme ça mon adresse e-mail dans le DIV de droite sera parfaitement aligner à ma 2eme ligne du DIV de gauche (le slogan)

Merci!

Mon code CSS:

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
div.topborder{	
	position:absolute
	top: 0;
	left: 0;
	width: 100%;
	height: 1.0em;
	background-color: #000;
	}
 
div.header{
	border-top: 20px solid red;
    width: 100%;
}
 
div.LeftHeader{
    float: left;
	vertical-align: text-bottom;
    padding: 10px;
    width: 45%;
    border: 1px solid gray;
}
 
div.RightHeader{
    float: right;
	text-align:right;
    padding: 10px;
    width: 45%;
    border: 1px solid gray;
}

Mon Code xhtml:

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
 
 
<div class="topborder"></div>
<div class="header">
 
 
<div class="LeftHeader">
    <p class="Logo">Mon Nom</p>
    <p class="Slogan">Mon Slogan</p>
</div>
 
<div class="RightHeader">
<p class="Slogan">contact@monnom.com</p></div>
 
</div>

**Dionyzos** · 24/05/2010, 16h00

Voici une solution :

Code html :

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
48
49
50
51
52
53
54
55
56
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>Test</title>
        <style type="text/css">
            div.topborder {
                width: 100%;
                height: 1.0em;
                background-color: #000;
                }
 
            div.header {
                position: relative;
                border-top: 20px solid red;
                width: 100%;
                height: 110px;
            }
 
            div.LeftHeader {
                position: absolute;
                left: 0px;
                bottom: 0px;
                padding: 10px;
                width: 45%;
                border: 1px solid gray;
            }
 
            div.RightHeader {
                position: absolute;
                right: 0px;
                bottom: 0px;
                text-align :right;
                padding: 10px;
                width: 45%;
                border: 1px solid gray;
            }
        </style>
    </head>
    <body>
 
        <div class="topborder"></div>
        <div class="header">
            <div class="LeftHeader">
                <p class="Logo">Mon Nom</p>
                <p class="Slogan">Mon Slogan</p>
            </div>
 
            <div class="RightHeader">
                <p class="Slogan">contact@monnom.com</p>
            </div>
        </div>
 
    </body>
</html>