28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Alors j'explique ma mise en page rapidement elle est très simple:

J'ai une div Global (top:50%) contenant une serie de div juxtaposées (float:left) qui prendront de la largeur au fur et à mesure que j'ajouterais du contenu.

Ca me fait une longue bande centrée verticalement avec un scroll horizontal qui s'agrandiras petit à petit..

J'ai donc en CSS:

div#Global {
	background-image:url(BG.png);
	position:absolute;
	top:50%;
	margin-top: -225px;
	[#red]width:auto;[/#]
	height: 450px;
	font-family: Helvetica, Arial, sans-serif;

}

div#Header {
	float:left;
	width: 38px;
	height: 450px;
	font-family: Helvetica, Arial, sans-serif;
	}
	
div#Menu {
	float:left;
	width: 1400px;
	height: 400px;
	margin-top: 26px;
	font-family: Helvetica, Arial, sans-serif;
}

div#Visualization
{
	float:left;
	width: 2000px;
	height: 380px;
	margin-top: 35px;
	font-family: Helvetica, Arial, sans-serif;
}

etc...


en HTML schématiquement:


<div id="Global">
<div id="Header"> Contenu</div>
<div id="Menu"> Contenu </div>
<div id="Visualization"> Contenu qui grandiras ... </Div>
etc...
</div>


Mon problême:
mon width:auto; de la div global ne fait pas ce que je pensais, je veux que la width soit tojours égal à la somme de la largeur de toute les div qu'il contient.. même si je les modifies...

Est-ce possibe?

Merci

PS// J'ai déja beaucoup cherché sur internet mais les overflow:auto overflow:hidden et les clear:both en tout genre n'ont pas marché.. je pense que je cherchais au mauvais endroit.
Bonjour,

Je viens d'essayer mais si je supprime le width en PX (que je mette 100% ou que je supprime complètement la ligne ca ne change rien)... l'ensemble de mes divs viennent s'entasser les unes en dessous des autres (alors qu'elles sont toutes en float).
Donc même si je met un overflow:hidden ca ne règle pas ce problème.

En fait je ne constate pas que: "Sur les navigateurs conformes aux standards, la position float sort l'élément du flux et de son conteneur (ce n'est pas le cas sur IE)." Moi, elles s'entassent verticalement (sur FF 3.6.8, sur IE, même chose)

Pour qu'elle se rangent toutes les unes a cotés des autres je n'ai pas encore trouvé d'autres moyen que de mettre manuellement en width de la #div global la somme de toutes les div float:left.

Quelqu'un sait pourquoi ca réagit comme ca? Smiley sweatdrop