Discussion :

[titmael]

Bonjour,

toujours les mêmes questions mais je m'arrache les cheveux !

Voici mon positionnement :


Comment faire en sorte que le div bleu ne se décale pas en dessous du rouge si ma résolution d'écran est faible (<1280px de large) comme ci dessous (le cadre noir représente ma fenêtre) :



Voici un extrait de mon css :

Css div rouge

Code :

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

1
2
3
width: 160px;
float: left;
margin-top:50px;

Css div bleue

Code :

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

1
2
3
4
width: 1060px;
margin-top:20px;
float:left;
padding-bottom:100px;

Je précise que les tailles (les width) sont fixes pour une bonne raison, on ne peut donc pas les changer

Mes divs rouge et bleues sont en float:left pour le moment.
J'ai essayé de mettre un overflow sur le div bleu mais sans succès.

Merci à tous (d'avance)

[FirePrawn]

Bonjour,

Pourrais-tu nous montrer ton code css ? A première vue je dirais qu'il faut mettre une taille relative à ta div.

[titmael]

C'est ajouté dans le premier post

[Kaamo]

hum, si on ne peut pas changer les tailles, voici un ptit code que je n'ai pas eu le temps de vérifier mais qui me parait juste.

En gros, il suffit "d'encapsuler" les deux div dans une autre qui a une position "relative".
On indique qu'elles ont une position "absolute" et on fait débuter la div bleu 160px à droite par rapport au bord de l'écran. Ainsi elle devrait se coller derrière la rouge et activer le scroll de la page sans retourner à la ligne (pour les écrans de résolution < 1220px)

Code :

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

1
2
3
4
<div style="position:relative;">
<div style="position:absolute;width:160px;margin-top:50px;"></div>
<div style="position:absolute;left:161px;width:1060px;margin-top:20px;padding-bottom:100px;"></div>
</div>

[titmael]

Trouvé : le conteneur jaune doit avoir une taille qui puisse contenir mes 2 divs, c'est à dire environ 1230px.