Problème de retour à la ligne avec div

Bonjour,

J'ai un problème de design CSS depuis maintenant 2 jours et tout les tutoriels de l'internet n'y peuvent rien

Rapidement et clairement : j'ai fait le design de base de mon site dans un premier temps à l'aide d'un classique tableau (des td partout), ca marchait bien. On m'a dit (je suis pas très à jour en prog internet) que de nos jours les css étaient de rigueur (ce qui me sera utile pour faire plusieurs thèmes).
Donc j'ai tout refais à base de css, et la problème...

la version avec tableau : ici
voila ce que je veux en css, un tableau centré, qui se recentre automatiquement au redimensionement de la fenetre, et se voit manger si la fenetre devient trop petite.

Essai css 1 (partie haute de l'interface seulement) : ici
une div globale (strip1), englobant 3 divs (blanc, coin menu, drapeau UK) en float:left et width en pourcentage
Lors du redimentionement de la fenêtre, les elements s'espacent, se chevauchent... bref la cata

Essai css2 : ici
les 3 divs cote à cote, en float:left, la partie blanche avec un width en % et les deux autre en width fixe (en px)
Lors du redimentionement, tout va bien, sauf que quand le fenetre devient trop petite, les elements vont à la ligne suivante...

Ca ne doit pas être bien méchant mais quand ca veut pas... ca veut pas.

Merci pour le coup de main, j'en peux plus de ce truc
Modifié par gOOOze (05 Mar 2008 - 17:04)

Salut,

je n'ai pas bein compris tout le problème et peut-etre que ta façon de t'y prendre est un poil compliquée.

Mais je pense que cela t'aidera d'englober toutes les divs en float dans une div de largeur fixe (et c'est d'ailleurs celle-ci et seulement celle-ci qu'il faut centrer à l'ecran). Si la zone d'ecran devient trop petite, le fait d'avoir une div de taille fixe empechera les elements en float à l'intérieur de bouger étant donné que ceux ci se placeront par rapport a leur div parente et non plus directement par rapport à la fenetre.
Modifié par skywalk3r (05 Mar 2008 - 16:55)

Salut, et Merci!!

Je me doutais que c'étais pas méchant voir simple, j'aurais du y penser

J'ai fais ce que tu as dit et ca marche parfaitement, ma div globale ce centre au redimensionnement de la fenetre mais pas de retour à la ligne en cas de manque de place. Merci beaucoup

Au cas ou ça peut en aider d'autres :

[i]HTML[/b]

	<div class="strip1">
    	        <div id="white_side_strip1">	</div>
	        <div class="corner_top_left">	</div>
	        <div class="ball_top_big">	
	  		<IMG SRC="../images/flags/flag_big_en.gif" alt="English" NAME="English" WIDTH=93 BORDER=0 usemap="#EnglishMap" >	
                    </div>
           </div>

[i]CSS[/b]

.strip1 {
	text-align:center;
	width: 800px;
	height: 150px;
	margin: 0px auto 0px auto;
}

#white_side_strip1 {
	width:25%;
	height:150px;
	background-color:#FFFFFF;
	float: left;
}
.corner_top_left {
	width:154px;
	height:150px;
	background-image:url(../images/corner_top_left.jpg);
	float: left;
}


.ball_top_big {
	width:93px;
	height:150px;
	float: left;