28172 sujets

CSS et mise en forme, CSS3

Bloc right fixe et left variable

bonjour,

comme le montre mon petit exemple ci-dessous, j'ai une page avec 2 bloc. 1 left qui occupe la plupart de l'espace de ma page et 1 bloc right. Je voudrais fixer mon right mais rendre mon left variable notamment pour le changement de résolution.

Ca fait 2 heures que je cherche tuto, etc... et impossible d'y arriver, ce serait magnifique si quelqu'un pouvait me fournir une idée du code css

Merci Smiley ravi

<div id="Tab1">
<div id="left">
<table ....>
</div>
<div id="right">...</div>
</div>
Je propose:



#tab1{
overflow: auto;
}

#left{
width: 75%;
}

#right{
float: right;
width: 200px;
}
En utilisant les flottants :


<!DOCTYPE html>
<html>
<head>

	<meta charset=utf-8" />
	<title>Largeur fluide float</title>

<style>
.wrapper {
	background: #ff0;
}

.wrapper:after {
	content: '';
	display: block;
	clear: both;
}

.content { 
	float: left;
} 
 
.aside {
	float: right; 
	width: 200px; 
	background: #0f0;
}
</style>
</head>

<body>

<div class="wrapper">

	<div class="content">
	Contenu
	</div>

	<div class="aside">
	Colonne droite
	</div>

</div>

</body>
</html>


Plus d'infos :

http://www.alsacreations.com/static/gabarits/modele06.html
http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html


Ou display table/table-cell :


<!DOCTYPE html>
<html>
<head>

	<meta charset=utf-8" />
	<title>Largeur fluide display table</title>

<style>
.wrapper {
	display: table;
	width: 100%;
}

.content {
	display: table-cell;
	background: #ff0;
}

.aside { 
	display: table-cell;
	width: 200px; 
	background: #0f0;
}
</style>
</head>

<body>

<div class="wrapper">

	<div class="content">
	Contenu
	</div>

	<div class="aside">
	Colonne droite
	</div>

</div>

</body>
</html>


Plus d'infos :

http://www.alsacreations.com/article/lire/1200-10-techniques-avancees-et-secrets-de-css2.html
Modifié par jb_gfx (03 Aug 2011 - 19:56)
Sujet clos
Aller à