28172 sujets

CSS et mise en forme, CSS3

[résolu]PB div relative float left + div à droite

Bonjour ,

Voila mon problème et je ne comprend pas pourquoi j'ai ce comportement.

J'ai une div relative à gauche à laquelle je donne la propriété css "float : left" pour pouvoir mettre une div à droite.

ce qui donne pour le css :


#mapconteneur {
	position : relative;
	float : left;
	margin : 0px 25px;
	width : 564px;
	height : 573px;
	background : url(map.png) no-repeat;
	}

#content h3 {
        border-bottom : 1px solid #000;
}


et ceci pour le html :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>example</title>
</head>
 <body>
<div id="mapconteneur">
</div>
<div id="content">
<h3>test</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<body>
</html>


Le "border-bottom" du "h3" prend toute la largeur mais mon titre et mon paragraphe se positionnent bien.

Pourquoi ? Smiley fache

(j'utilise le positionnement "relative" pour faire de la superposition d'image dans #mapconteneur)

Apperçu ici : http://rs459.free.fr/test
Modifié par rs459 (10 Jul 2009 - 11:04)
Il ne s'agit pas du tout d'un problème lié à la position relative, mais bien du fonctionnement normal d'un élément non "floaté" suivant un élément "floaté".
Pour visualiser la situation, je t'invite à appliquer une couleur de fond à ton <div> "divdedroite"

Tu remarqueras ainsi que tes h3, prennent donc tout naturellement la largeur qui leur est disponible.
Tu peux trouver étrange que le texte soit ainsi "poussé" par l'élément floaté, alors que le conteneur en lui-même ne l'est pas mais bon disons tout de même qu'il s'agit là de la fonction première de la propriété float... Smiley cligne
Modifié par Nigel (05 Jul 2009 - 18:04)
ha ok effectivement , j'ai encore du mal avec le positionnement , surtout quand c'est censé etre fluide c'est une horreur à gérer.

Merci
Sujet clos
Aller à