28234 sujets

CSS et mise en forme, CSS3

Problème de colonnes qui ne "poussent" pas le corps....

Bonjour,

Mon site a été crée à partir d'un CMS (joomla avec le template rhuk_milkyway).

Je l'ai modifié en mettant une colonne à gauche et une à droite (float left et float right). Le problème est que ces colonnes ne poussent pas le corps du site donc lorsqu'il y a pas de contenu, elles débordent:

http://img96.imageshack.us/img96/9791/capho.jpg


[U]Ma page "index.php":[/U]

<body id="page_bg" class="color_<?php echo $this->params->get('colorVariation'); ?> bg_<?php echo $this->params->get('backgroundVariation'); ?> width_<?php echo $this->params->get('widthStyle'); ?>">

<div class="center" align="center">
	<div id="wrapper">
	
			<div id="fond">				
						<div id="top-log" align="right">
						  <jdoc:include type="modules" name="top-left" /> 
						</div>
						<div id="head"></div>
					

						<div id="header">		
							<div id="header_l">
								<div id="panier" style="float:right">
									<jdoc:include type="modules" name="top-right-panier" />
								</div>	
								<div id="logo"></div>
									<jdoc:include type="modules" name="top" /> 						
							</div>
							<div id="chercher" style="float:right">
								<jdoc:include type="modules" name="top-right-recherche" />
							</div>
						</div>   
			</div>
	
		<div id="wrapper_r">
			<div id="pathway">
				<jdoc:include type="modules" name="breadcrumb" />
			</div>

			<div id="whitebox">
			
				<div id="whitebox_m">
					<div id="area">
									<jdoc:include type="message" />

						<div id="leftcolumn">
								<div id="petit-titre-rose-left"><p>NAVIGATION</p></div>
								<?php if($this->countModules('left')) : ?>
									<jdoc:include type="modules" name="left" style="rounded" />
								<?php endif; ?>
						</div>
						<div id="rightcolumn">
								<?php if($this->countModules('right')) : ?>
									<jdoc:include type="modules" name="right" style="rounded"/>
								<?php endif; ?>												
						</div>			
						<?php if($this->countModules('left')) : ?>
						<div id="maincolumn">
								<div id="middle-scroll">
									<jdoc:include type="modules" name="maincolumn" />
								</div>
						<div id="whitebox_b">
						<?php else: ?>
						<div id="maincolumn_full">
						<?php endif; ?>
							
							<table class="nopad">
								<tr valign="top">
									<td>
										<jdoc:include type="component" />
									</td>
								</tr>
							</table>

						</div>
						</div> 
					
				</div>				
				</div>
			</div>

			<div id="conditions"><p><a href="index.php?option=com_content&view=article&id=63" title="Mentions legales BioRecept">
						Mentions l&eacute;gales</a> | <a href="index.php?option=com_content&view=article&id=64" title="Conditions generales de vente BioRecept">
						Conditions g&eacute;n&eacute;rales de vente</a></p>
			</div>
			<div id="footerspacer"></div>
		</div>

	</div>
</div>
<jdoc:include type="modules" name="debug" />

</body>
</html>


CSS:

#leftcolumn {
	padding: 0;
	margin: 0;
	width: 20%;
	float:left;
	
}


#rightcolumn {
	padding: 0;
	margin: 0;
	width: 20%;
	float:right;
}


#maincolumn,
#maincolumn_full {
	margin-left: 20%;
	width: 60%;
}

#maincolumn_full {
	margin-left: 0;
	padding: 0;	
	width: 100%;
}




J'ai essayé différente choses sans résultat....

J'espère que quelqu'un pourra me venir en aide !

Merci d'avance.

Geoffrey
Salut,

Vu que tes colonnes sont en float, elles sortent du flux, et donc elles "n'appartiennent" plus a la div parent (corps). C'est pourquoi le corps ne prends que la taille de ton maincolumn.

Voila, a plus !
Sujet clos
Aller à