position:relative et padding forcé

**Pointfixe** · 05/08/2011, 13h11

Bonjour

J'ai essayé un position:relative pour le bloc droit dans une disposition bloc gauche/bloc droit avec un float pour le bloc gauche et là je me retrouve avec un padding gauche (et peut-être droit) forcé pour le bloc droit, que je ne peux pas corriger avec un padding:0px.

Si j'utilise un position:absolute, là j'ai un padding forcé haut et bas.

Vous pouvez me dire pourquoi ? Merci beaucoup !

Voici mon code html:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
 
<title> poiu </title>
 
<body>
 
<div id="gauche">
gauche
</div>
 
<div id="droite">
droite
</div>
 
</body>
 
</htlm>

Et mon CSS:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#gauche
{
background-color:yellow;
float:left;
width:100px;
}
#droite
{
background-color:orange;
position:relative;
left:120px
}

**Bisûnûrs** · 06/08/2011, 11h33

Parce que tu n'as ni besoin du position:relative, ni du left:120px. Remplace ces deux propriétés par un simple margin-left:120px.

**Pointfixe** · 06/08/2011, 18h03

Certes, je suis d'accord avec toi mais en ce moment j'essaye de comprendre comment marchent html et css, donc je fais des esssais et à chaque fois qu'un truc inattendu se produit j'essaye de piger pourquoi.

**Candygirl** · 06/08/2011, 21h05

Hello,

Ton bloc se déplace bien de 120px sur la gauche, depuis sa position initiale, sans influencer les autres éléments de la page, ce qui laisse apparaître un espace de 120-100=>20 pixels entre tes 2 blocs et fait apparaître la scroll barre horizontale.

Ce qui te perturbe, vraisemblablement, c'est que le background du bloc de droite débute depuis le bord gauche de ta page et non depuis la fin du bloc gauche, ce qui explique la présence de ce qui ressemble à un padding de 100px.

Si ce comportement t'étonne, je ne peux que t'encourager à approfondir tes notions concernant les flottants ainsi que le flux.

**Pointfixe** · 07/08/2011, 01h48

merci pour vos réponses, j'ai compris ce qui se passait.
C'est que le texte de mon bloc droit est normalement poussé de 100px par le float gauche, comme si je n'avais pas mis de positionnement particulier pour le bloc droit, et qu'en plus j'ai le décalage normal de mon bloc droit spécifié dans mon position:relative. Alors que dans mon esprit mon position:relative rendait inutile le décalage du texte du bloc droit dû au float. Tout ça est très logique en fait.

position:relative et padding forcé

CSS

Discussions similaires

Partager

Partager