div en bas d'un autre

Eléphant du PHP | 417 Messages

18 mars 2012, 16:01

bonjour

j'ai un problème avec css j'ai un div page (qui contient 3 div menu,contenu et espacePub) et un autre div footer

comme faire pour que ce dernière soit toujours en bas de div page quelque soit le height de l'un des 3 div qui composent div page

Code : Tout sélectionner

#header { margin:auto; width:925px; height:150px; background-color:red; padding:0px 0px 30px 0px; } #page { margin:auto; width:1200px; height:500px; background-color:#159753; } #menu { float:left; width:205px; height:400px; background-color:#111999; } #contenu { float:left; background-color:green; width:800px; height:400px; padding-left:15px; } #espacePub { float:left; background-color:#852654; width:180px; height:auto; } #footer{ margin:auto; width :975px; height:auto; background-color:#369741; }
<!DOCTYPE html>
<html>
	<head>
		<title>structure de mes pages</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
	</head>
	<body>
		<div id="header">
		
		</div>
		
		<div id="page">
			<div id="menu">
				ici menu<br/>
				ici menu<br/>
				ici menu<br/>
				ici menu<br/>
				ici menu<br/>
			</div>
			<div id="contenu">
				ici contenu<br/>
				ici contenu<br/>
				ici contenu<br/>
				ici contenu<br/>
				ici contenu<br/>
				ici contenu<br/>
			</div>
			<div id="espacePub">
				ici espacePub<br/>
				ici espacePub<br/>
				ici espacePub<br/>
				ici espacePub<br/>
			</div>
		</div>
		
		<div id="footer">
			ici footer<br/>
			ici footer<br/>
			ici footer<br/>
		</div>
	</body>
</html>

Petit nouveau ! | 4 Messages

19 mars 2012, 15:52

salut , plusieurs solutions pour ces problèmes de flottant

1)"clearfix" sous google tu trouveras des infos à ce sujet.

2)tu peux ajouter un markup après ton div page :
<br style="clear:left"/>
(pb de sémantique ...)

3)ou ajouter dans le css du footer un
clear:left
les deux derniers ne fonctionneront pas (ou très mal) sous les nav anciens,ie en particulier, pb de haslayout.

Si l' envie te prend d'aligner tes blocs en fonction de la hauteur excessive d'un bloc, google le concept de faux-column ou explore des solutions comme "les frameworks Css" qui sont pour certains un gain de temps appreciable et performant.

voila a+ :)

Eléphant du PHP | 417 Messages

03 avr. 2012, 09:13

merci pour votre réponse :)
j'ai utiliser clear: left et ça marche comme je veux
mais comment puis-je dépasser les pb avec les anciens navigateur?