[HTML / CSS] Un cadre contenant deux blocs

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML / CSS] Un cadre contenant deux blocs

Arjuna

Aircraft Ident.: F-MBSD

Salut,

Dans ma page, je dois afficher un cadre bleu, et dans ce cadre, deux éléments de texte : l'un alligné à gauche, et l'autre à droite.

J'ai donc fait ça :

Code :

<div class="critereRechercheCentre">
<div class="innerGauche">Blabla gauche</div>
<div class="innerDroite">Blabla droite</div>
</div>

Et le style :

Code :

.critereRechercheCentre
{
border: 1px solid #9EB7DF;
background-color: #EAF1FB;
font-weight: bold;
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
padding-bottom: 9px;
width: auto;
display: block;
margin-top: 22px;
clear: both;
}
.critereRechercheCentre.innerGauche
{
text-align: left;
width: 48%;
clear: both;
float: left;
display: block;
}
.critereRechercheCentre.innerDroite
{
text-align: right;
width: 48%;
clear: both;
float: right;
display: block;
}

Ca "marche", sauf que mes deux bloques de texte dépassent du cadre, qui ne grandit pas avec le reste... Comment corriger ça ?

J'ai remplacé par des <span> et des <p>, mais rien ne change, ça déconne toujours

Merci de me dire comment faire...

Tests pour le moment avec IE 6 SP2 mais ça doit marcher aussi sous FF

Publicité

Huitzilopoc

Salut à toi,

Il y a un peu de répétition dans ton code :

display: block ; est inutile car les "div" sont déjà des éléments de type en bloc.
seul un float est nécéssaire dans ce cas là. (deux sont nécéssaires par exemple lors de 3 colonnes et plus, pas 2).
les clear: both ; sont inutiles (peut-être les utiliser, si jamais t'as besoin, en cas de rajout en dessous de ces deux cadres). De plus ce n'est pas comme ça que la propriété s'utilise.
sinon tu n'es pas obligé de mettre ".critereRechercheCentre." devant tes ".innerDroite" et "innerGauche". d'ailleurs tu as oublié le ">".

Voilà qui est un peu plus propre. Je suis pas sûr à 100% mais j'ai test& sous IE et FF.

Code :

.critereRechercheCentre
{
border: 1px solid #9EB7DF;
background-color: #EAF1FB;
font-weight: bold;
padding: 4px 7px 9px 7px ;
margin-top: 22px;
}
.innerGauche
{
text-align: left;
float: left;
width: 48% ;
}
.innerDroite
{
text-align: right;
}

ceci est une bonne adresse pour comprendre les "float" : http://www.openweb.eu.org/articles/initiation_float/
a+ !

Message édité par Huitzilopoc le 22-08-2005 à 16:01:00

FORUM HardWare.fr

Programmation

HTML/CSS

[HTML / CSS] Un cadre contenant deux blocs

Sujets relatifs
[CSS] cellule de tableau...	probleme de flux rss . Les site en html peuvent pas l'afficher
actvé un exe a partir d'une page html en local [reglé]	[CSS] Mise en page
Ouvrir un dossier depuis une page html	Afficher le formulaire suivant en CSS (sans tableaux)
[CSS] Impossible de fixer la taille	Les tableau en HTML et Incrementation au format temps
Positionnement <SPAN> en CSS via JavaScript	problème html bloquer textarea !!
Plus de sujets relatifs à : [HTML / CSS] Un cadre contenant deux blocs

Page générée en 0.058 secondes