28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai une mise en page avec un entete et un pied de page et au centre 3 colonnes.
La colonne centrale doit impérativement rester dans le code XHTML devant les 2 colonnes latérales.

Avec mon code ci dessous j'ai les 2 problemes suivants :

1) Si le contenu de l'une des 2 colonnes latérales prend plus de hauteur que le contenu de la colonne centrale alors celui ci deborde en bas par dessus le reste de la page.
2) Si dans ma colonne centrale je place des boites, la marge de la derniere boite debordre de la colone centrale ce qui me crée un vide au dessus du pied de page.

Avez vous une idée de comment regler le probleme ?

Code CSS :

body {background-color:#E0A666; margin:2px; padding:0; text-align:center; color: #000; font-family: Verdana, Arial, Sans-Serif; font-size: 11px;}

#conteneur,#tete,#pied {margin:0 auto; width:766px; text-align:left;}
#conteneur {position:relative;}
#centre {padding:0 144px; background-color:#FFC88D;
#gauche,#droite {position:absolute; top:0; width:144px;}
#droite {right:0;}

#tete {background-color:#FFCCFF;}
#pied {background-color:#00CC00;}


Code XHTML :

<div id="tete">Entete</div>

<div id="conteneur">
	
	<div id="centre">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam…</p>
	</div>

	<div id="gauche">
	
		<ol>
			<li>Site 1</li>
			<li>Site 2</li>
			<li>Site 3</li>
		</ol>
		
	</div>

	<div id="droite">
	Colonne de droite
	</div>
	
</div>
	
<div id="pied">Pied</div>


Merci d'avance pour vos remarques !
Modifié par neutronweb (03 Dec 2007 - 20:20)