Outils pour utilisateurs

Outils du site


web:css:structure_trois_colonnes

Table des matières

Structure trois colonnes

Le code HTML/CSS suivant permet de créer un item avec trois colonnes.

CSS

#item { 
	width:300px; 
	text-align:left; 
	margin:0 auto; 
	font-size: 10pt;
} 
 
#item > #wrapper > #leftcol{
	width:50px; 
	float:left; 
	position:relative;
}
 
#item > #wrapper > #twocols{
	width:250px; 
	float:right; 
	position:relative; 
}
 
#item > #wrapper > #twocols > #rightcol{
	width:50px; 
	float:right; 
	position:relative; 
}
 
#item > #wrapper > #twocols > #maincol{ 
	float: left; 
	position: relative; 
	width:200px; 
}
 
#item .clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
 
#item .clearfix {
	display: inline-block;
}

HTML

<div id="item" >
	<div id="wrapper" class="clearfix">
		<div id="twocols"> 
			<div id="maincol"><p>Colonne principale</p></div>
			<div id="rightcol"><p>Droit</p></div>
		</div> 
		<div id="leftcol"><p>Gauche</p></div>
	</div>
</div>

web/css/structure_trois_colonnes.txt · Dernière modification : 2022/02/02 00:42 de 127.0.0.1