Mise en page avec div et CSS

**Jolt0x** · 14/01/2014, 12h41

Bonjour,

J'ai 2 questions d'ultra débutant sur la mise en page en CSS.

1/ J'ai un div contenu dans un autre div. Je veux que le div intérieure soit positionné tout en bas du div conteneur et cela quelle que soit la hauteur et/ou le contenu du div conteneur (j'ai du texte et un image dans le div conteneur, juste au dessus du div intérieur).

le div intérieur possède la classe ".bas" et est défini comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.bas
{
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative; 
	bottom: 0; 
/*	width:100%; */
}

J'ai bien pris soin de mettre le bottom à 0. J'ai essayé avec une position absolute, mais ca fout tout en l'air. Je ne sais pas pourquoi ca ne fonctionne pas, sur aucun navigateur.

2/ Sur une autre page j'ai un div de navigation placé a gauche avec un float left et de taille fixe (width: 300px

. J'ai a droite de ce div de navigation un autre div (un div de contenu) qont je ne veux pas spécifier la largeur (par défaut ce div doit normalement occuper toute la largeur possible, ce que je souhaite précisément. Or lorsque je modifie la largeur de mon navigateur le div de contenu se place en dessous du div de navigation alors que je voudrais que la largeur de ce div de contenu (largeur non fixé dans le CSS) s'ajuste automatiquement. J'ai essayé de jouer sur la propriété clear (both, left, right, none) mais rien n'y fait. J'ai essayé de mettre le div de contenu avec un float right, dispaly inline-block, etc. Rien n'y fait.

Voila ma définition du div menu nommé left-admin:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.left-admin {
	padding: 0px;
	margin:10px;
	width:300px;
	float:left;
    border-style: solid;
    border-width: 1px;
    border-color: lightgrey;
	font-family: verdana, arial;
	font-size: 11px;
	color: #666666;
	display: inline-block;
}

et ma définition du bloc de contenu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.right-admin {
/* 	width:100%; */
	margin:10px;
	display: inline-block;
 }

Merci.

**Bisûnûrs** · 14/01/2014, 14h02

1/ Voir ici : http://css.developpez.com/faq/?page=...ement_absolute
2/ Le display:inline-block; ne sert à rien, mets un margin-left:322px; sur ton bloc droit.

**Jolt0x** · 14/01/2014, 19h03

Merci Bisûnûrs.

Pour la 2/ c'est OK, bien que je suis un peu réticent a mettre 2 fois (ou compter 2 fois) dans le code CSS la largeur de mon menu de gauche (une premières fois dans le width du menu de gauche et une seconde dans le margin-left du menu de droite). OK.

En revanche pour la question 1/ en absolute c'est absolument impossible parce que dés que je modifie la hauteur de mon navigateur le div positionné en absolute bouge. C'est absolument impossible. La solution ne peut-être qu'en utilisant un positionnement relatif.

Peut-être que pour cette question 1/ n'as tu bien pas compris mon besoin. J'ai un certain nombre de carré ou rectangle sur ma page et tout est aligné. J'ai appelé plus haut ces carrés des div conteneurs. Ces carrés contiennent une image de taille dimensionnée pour entrer dans ces carrés ainsi que un peu de texte et un rectangle (un div intérieur) que je veux mettre tout en bas du carré (le div conteneur). Or évidement je ne veux pas faire du padding bestial avec des &nbsp ou des "br" : je veux que mon div intérieur vienne se coller en bas du carré (div conteneur) automatiquement. Possible ?

**Muchos** · 15/01/2014, 03h27

Envoyé par Jolt0x

La solution ne peut-être qu'en utilisant un positionnement relatif.

Attention: la position de la DIV "bas" est absolute par rapport à la DIV "content". Ex:

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
 <meta charset="UTF-8" />
 <title>Position absolute</title>
 <style type="text/css">
.content {
 position: relative;
 min-height: 4em;
 background: #abc
}
.bas {
 position: absolute;
 bottom: 0;
 left: 25%;
 height: 2em;
 width: 50%;
 background: #def;
}
 </style>
</head>
<body>
 <div class="content">
  <div class="bas"></div>
 </div>
</body>
</html>

**Mell** · 15/01/2014, 15h40

Le position:relative ne fonctionne qu'avec top et left. Pour que ton bottom:0 fonctionne il te faut de l'absolute.
Sinon regarde du coté de position:fixed

**Bisûnûrs** · 15/01/2014, 16h47

Envoyé par Jolt0x

En revanche pour la question 1/ en absolute c'est absolument impossible parce que dés que je modifie la hauteur de mon navigateur le div positionné en absolute bouge. C'est absolument impossible. La solution ne peut-être qu'en utilisant un positionnement relatif.

J'en doute, mais si tu peux nous montrer le code complet de ton problème, ou mieux, un exemple en ligne, ça nous aiderait beaucoup à comprendre ton problème.

Envoyé par Mell_

Le position:relative ne fonctionne qu'avec top et left

Non !

Envoyé par Mell_

Pour que ton bottom:0 fonctionne il te faut de l'absolute.

Non !

Envoyé par Mell_

Sinon regarde du coté de position:fixed

Mais pour quoi faire ?

**Mell** · 16/01/2014, 14h48

Baah si.. un bottom:0 ne fonctionnera pas avec un position:relative ...

http://jsfiddle.net/dvn4y/

**Bovino** · 16/01/2014, 15h05

C'est juste parce que tu ne comprends pas le fonctionnement de position: relative;...

Un élément en position relative sera positionné en fonction de la place qu'il aurait occupé s'il n'était pas positionné. Donc c'est sûr qu'avec bottom: 0, ça ne modifie pas grand chose, ni d'ailleurs si tu mettais top: 0, left: 0 ou right: 0.

Glossaire CSS. Type de positionnement | position

**Jolt0x** · 19/01/2014, 15h26

Merci a tous. Ca fonctionne parfaitement avec ce que me propose Muchos. Tagué en Résolut.

Mise en page avec div et CSS

CSS

Discussions similaires

Partager

Partager