Col Gauche puis Droite HS // Col Droite puis Gauche OK ??

Voila je m'arrache les cheveux avec le CSS (ok c'est pas nouveau !!)
voici mon problème
3 blocs (header, body, footer)
pour ces 3 la pas de pbs
par contre body est coupé en 2 (30%, 70%)

Ce qui ne marche pas :

<div id="main">main
	<div id="header">header
    	</div><!-- Fin header -->

    <div id="body">body
    	<div id="menuleft">menuleft
        </div>
        <div id="content">content
        </div>
    </div><!-- Fin body -->
    <div id="footer">footer
    </div><!-- Fin footer -->
</div>

@charset "utf-8";
/* CSS Document */

/************************/
/*  Initialisatrion     */
/************************/
body {
padding:0;
margin:0;
}



/************************/
/*  Main                */
/************************/

#main {
background-color:#FFFFCC;
margin: auto;
width:80%;
}


/************************/
/*  Header              */
/************************/
#main #header {
background-color: #FFCCFF;
width: 100%;
}



/************************/
/*  Body                */
/************************/
#main #body {
background-color: #CCFFFF;
width:100%;
}

/************************/
/*  MenuLeft            */
/************************/

#main #body #menuleft {
background-color:#FFCC99;
width: 30%;
float:left;
}

/************************/
/*  Content             */
/************************/

#main #body #content {
background-color:#CC99FF;	
width: 70%;
}





/************************/
/*  Footer              */
/************************/
#main #footer {
background-color: #99CCFF;
width: 100%;
clear:both;
}

Et maintenant plus étrange : ce qui marche : il suffit d'inverser la colonne droite et gauche, déclarer en premier la colonne droite PUIS la colonne gauche :

<div id="main">main
	<div id="header">header
    	</div><!-- Fin header -->

    <div id="body">body
        <div id="content">content
        </div>
    	<div id="menuleft">menuleft
        </div>
    </div><!-- Fin body -->
    <div id="footer">footer
    </div><!-- Fin footer -->
</div>

bin sur le float : left deviens float: right et change de bloc.

@charset "utf-8";
/* CSS Document */

/************************/
/*  Initialisatrion     */
/************************/
body {
padding:0;
margin:0;
}



/************************/
/*  Main                */
/************************/

#main {
background-color:#FFFFCC;
margin: auto;
width:80%;
}


/************************/
/*  Header              */
/************************/
#main #header {
background-color: #FFCCFF;
width: 100%;
}



/************************/
/*  Body                */
/************************/
#main #body {
background-color: #CCFFFF;
width:100%;
}

/************************/
/*  MenuLeft            */
/************************/

#main #body #menuleft {
background-color:#FFCC99;
width: 30%;

}

/************************/
/*  Content             */
/************************/

#main #body #content {
background-color:#CC99FF;	
width: 70%;
float:right;
}





/************************/
/*  Footer              */
/************************/
#main #footer {
background-color: #99CCFF;
width: 100%;
clear:both;
}

Modifié par gcooo (21 Jan 2009 - 15:50)

J'ai une autre solution sans inverser l'ordre des blocs mais je ne la comprend pas ...

Si je met float: right ou float: left dans la colonne qui devrait se positionner à droite : ca marche, mais c'est illogique

@charset "utf-8";
/* CSS Document */

/************************/
/*  Initialisatrion     */
/************************/
body {
padding:0;
margin:0;
}



/************************/
/*  Main                */
/************************/

#main {
background-color:#FFFFCC;
margin: auto;
width:80%;
}


/************************/
/*  Header              */
/************************/
#header {
background-color: #FFCCFF;
width: 100%;
}



/************************/
/*  Body                */
/************************/
#body {
background-color: #CCFFFF;
width: 100%;
}

/************************/
/*  MenuLeft            */
/************************/

#body #menuleft {
background-color:#FFCC99;
width: 30%;
float:left;
}

/************************/
/*  Content             */
/************************/

#body #content {
background-color:#CC99FF;	
width: 70%;
float:left;
}

/************************/
/*  Filtre              */
/************************/

#body #content #filtre {
background-color:#3366FF;	
width: 100%;
}

/************************/
/*  Content Left        */
/************************/

#body #content #contentleft {
background-color: #999999;	
width: 30%;
float:left;
}

/************************/
/*  Content Right       */
/************************/

#body #content #contentright {
background-color:#9933FF;	
width: 70%;
float:left;
}



/************************/
/*  Footer              */
/************************/
#footer {
background-color: #99CCFF;
width: 100%;
}

Modifié par gcooo (21 Jan 2009 - 16:09)

Je dirais que pour la première solution, il manque une marge à gauche de 30% pour le contenu.

Je suis obligé de mettre 1 marge ?

Dans ce cas pourquoi quand j'inverse Right puis left : plus besoin de marge ?

Bonjour,

Je crois que tu n'as pas bien saisi le fonctionnement du positionnement flottant. En règle générale, un flottant ne repousse pas les blocs adjacents, donc ton menu flottant en width:30% ne va pas repousser vers la droite le contenu (non flottant) en width:70%. Le menu va se contenter de flotter par dessus le bloc de contenu, en repoussant uniquement le contenu texte mais pas les limites des blocs.

À potasser:
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant
et éventuellement:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

gcooo a écrit :
Dans ce cas pourquoi quand j'inverse Right puis left : plus besoin de marge ?

Tu as besoin d'une marge si tu ne donnes pas de largeur au bloc. Tu n'as pas besoin de marge si tu as limité sa largeur via un width: 70%. Dans les deux cas, que tu fasses flotter le menu à gauche ou à droite, ça n'a pas d'influence sur la position du bloc de contenu.