Bloc qui descend légérement [CSS]

Marsh Posté le 08-07-2010 à 10:45:17

Bonjour à tous.
Je rencontre un petit problème. La colonne de droite descend légèrement quand j'inscris du texte dans la colonne du centre.

http://img580.imageshack.us/img580/8707/howsitecss.png

Code style.css:

body
{
background-color: #C0C0C0;
}

#cadresuperieur
{
width: 881px;
height: 100px;
margin: auto;
margin-bottom: 20px;
background-color: #FF7F50
}
#grandcadre
{
width: 881px;
height: 500px;
margin: auto;
background-color: #FFFFCC
}
#cadreinterieurgauche
{
width: 150px;
height: 500px;
float: left;
background-color: #FF0000
}

#cadreinterieurcentre
{

}

#cadreinterieurdroit
{
width: 150px;
height: 500px;
float: right;
background-color: #FF0000
}

#cadreinferieur
{
width: 881px;
height: 20px;
margin: auto;
margin-top: 20px;
background-color: #FF7F50
}

Code index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Site en test</title>
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/test3/style.css" />
</head>
<body>
<div id="cadresuperieur">
On affiche ici le logo
</div>
<div id="grandcadre">
<div id="cadreinterieurgauche">
Texte de gauche
</div>
<div id="cadreinterieurcentre">
Hello
</div>
<div id="cadreinterieurdroit">
Texte de droite
</div>
</div>
<div id="cadreinferieur">
On affiche le copyright, le nom du concepteur...
</div>
</body>
</html>

-----------

Comment faire?

Reply

Marsh Posté le 08-07-2010 à 10:45:17

Reply

Marsh Posté le 08-07-2010 à 10:47:40

#cadreinterieurcentre
{

float:left
width:xxxpx
}

Message cité 1 fois

Reply

Marsh Posté le 08-07-2010 à 10:56:52

David Boring a écrit :

#cadreinterieurcentre
{

float:left
width:xxxpx
}

Merci bien, ça fonctionne.
Tu pourrais m'expliquer pourquoi il faut utiliser float:left au centre?

Reply

Marsh Posté le 16-07-2010 à 13:11:02

Pour qu'il se positionne en flottant juste à côté de la colonne de gauche.
Sans le "float" la balise div étant de type block, celui-ci occupe automatiquement toute la largeur. Du coup le contenu qui suit, se retrouve à la ligne.

Reply

Bloc qui descend légérement [CSS]

Sujets relatifs:

Leave a Replay