28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous, je débute en css et je n'arrive pas à résoudre ce problème :
je met 2 div côte à côte en float left et dés que la largeur de la fenêtre du navigateur est inférieure à la somme des 2 divs, la seconde div repasse dans le flux alors que je souhaiteras q'une scroll-barre horizontale apparaisse.(dans mon exemple ça le fait avec un la fenêtre d'un écran 17 pouces)

#gauche{
background-color: #06F;
height: 300px;
width: 700px;
float: left;
}
#droite{
background-color: #990;
height: 300px;
width: 500px;
float: left;

http://dimitriou.free.fr/test.html
En transformant mes divs en div PA ça résoud mon problème mais il doit bien y avoir une meilleure solution que ça.
Bonjour,

Pour résoudre ce problème de manière très simple et sans passer par un positionnement absolu, il suffit d'insérer les deux <div> flottantes dans un conteneur. Ce dernier doit bénéficier d'une largeur au moins égale à la somme des deux <div> enfants.

HTML :
<div id="conteneur">
	<div id="gauche"></div>
	<div id="droite"></div>
</div>


CSS :
#conteneur {
	width: 1200px; /* 700px + 500px */
}

#gauche{
	width: 700px;
	height: 300px;
	float: left;
	background-color: #06f;
}

#droite{
	width: 500px;
	height: 300px;
	float: left;
	background-color: #990;
}
Ok merci, c'était tout bête. (j'ai essayé de les mettre dans un conteneur mais j'avais pas dû préciser sa largeur). Pour être tranquille à l'avenir je dois donc créer dès le départ une div avec une largeur définie qui contiendra la page ?
dimz a écrit :
Pour être tranquille à l'avenir je dois donc créer dès le départ une div avec une largeur définie qui contiendra la page ?

Si tu veux une mise en page de largeur fixe, oui.
Par contre 1200px c'est peut-être excessif, non? Ou alors c'est à adapter pour les écrans plus petits (au pif: ordinateurs un peu anciens, netbooks, tablettes et smartphones) en utilisant les Media Queries.
1200 c'était un exemple, effectivement je me limite à 800px environ pour que le contenu essentiel puisse être visible à l'ouverture sur de petits écrans.
merci.