[Résolu] - 2 blocs côte-à-côte et largeur

Bonjour,

Je ne suis pas doué en css et en particulier sur le positionnement. je souhaite avoir 2 blocs l'un a coté de l'autre comme expliqué dans la partie

a écrit :
Trois blocs côte-à-côte avec un espace de séparation

de ce tutoriel . Mais je souhaiterais que le bloc de droite prenne toute la place qu'il a de disponible sur la droite. Le bloc de gauche serait quand a lui de largeur fixe (puis je utiliser les em sans problème ?).

Ces 2 blocs sont déjà dans un div. J'ai cherché un peu partout (si si je vous assure), mais il y a tellement d'informations que je m'y perd un peu

Si vous aviez la solution, ou un lien explicite avec l'explication, ce serait sympa

Merci à vous.
Modifié par zemage (22 Apr 2005 - 15:13)

Salut zemage

Pour que les blocs 1 et 2 soient de largeur fixe il faut spécifier un width et pour que ton bloc de droite prenne toute la place disponible à droit ne spécifie pas de width

Exemple ton div conteneur fait 500 px de large pas de margin pas de padding
Bloc 1 width 100px
Bloc 2 width 150px
Donc ton bloc 3 fera 500-(100+150)=250 px de large et si ton conteneur avait 1000px de large alors le bloc 3 ferait 750px

Pour bloc 1 et 2 pas de problème pour les em
Modifié par GuizBizet (21 Apr 2005 - 09:45)

Bonjour,

Le principe décrit dans cette partie du tutoriel est d'appliquer la propriété float à l'élément dimensionné, et d'indiquer une marge au moins de même valeur que la largeur de l'élément flottant.

#bloca{
width: 100px;
float:left;
propriété:valeur;
propriété:valeur;
}

#blocb{
margin-left:110px;
propriété:valeur;
propriété:valeur;
}

Il faut placer le bloc flottant avant le blocb.

Merci à vous, je vais effectuer quelques tests et je reviens mettre le résolu.

Parfait Très grand merci. J'avais fait quelques tests hier et impossible d'arriver à ce résultat.

Mais maintenant je me retrouve avec un nouveau problème sous IE.
Si je mets un tableau (100%, pour de la donnée structurée ) dans mon div de droite (blocb), ce tableau élargit et casse ce div
Cela à l'air d'être un problème courant, je vais creuser un peu plus.

Bonne journée

Je ne trouve pas de solution Est t'il possible de mettre un tableau qui prend toute la place d'un div sans largeur de définie ?

Désolé pour toutes ces questions.
Modifié par zemage (21 Apr 2005 - 15:27)

Bonsoir,

Durant cette belle journée je n'ai pas trouvé de solution à mon dernier problème.

J'ai suivi le pricnipe d'Igor, et dans mon div blocb, je souhaite ajouter un tableau (ne crier pas) qui prendrait toute la place disponible dans ce div en largeur. Mais je n'y arrive pas. Sinon je vais être obligé de remettre des tableaux imbriqués

Merci à vous

zemage a écrit :
(...)Sinon je vais être obligé de remettre des tableaux imbriqués

Bouh le vilain chantage
Aurais-tu ta page en ligne que l'on puisse jeter un coup d'oeil, ou le code.

Salut,

Merci d'aider un ptit débutant voilà une ébauche du code html (je ne peux mettre en ligne, désolé) :

<div id="page">

<div id="header">
<h1><a href="" title="Retour à la page d'accueil">TITRE</a></h1>
</div>

<div id="content">
<div id="headerForm">div headerForm</div>
<div id="contentForm">
<div id="bloca">
	<fieldset>
		<legend>Legend fieldSet</legend>
		<p><label>Date Début* :
<input name="StartDate" value=""></label></p>
		<p><label>Date Fin :
<input name="EndDate" value=""></label></p>
	</fieldset>
</div>
<div id="blocb">
<table class="tabForm"><caption>22/04/2005 10:06:22</caption><colgroup><col width="100"><col span="3" width="*"></colgroup>
<tr><th>1.1</th><th>1.2</th><th>1.3</th><th>1.5</th></tr>
<tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.5</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td><td>3.5</td></tr>
<tr><td>4.1</td><td>4.2</td><td>4.3</td><td>4.5</td></tr>
</table>

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

et le css (rigolez pas ) :

html{
	margin: 0;
	padding: 0;
}
body{
	margin: 0;
	padding: 0;
	color: #333333;
	background: #efefef
	font: 76% Verdana, Arial, sans-serif;
}
a{
	color: rgb(35,81,159);
	font-weight: bold;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
/* Blocs */
#page{
	margin: 0;
	padding: 0.3em;
}
#header{
	color: #fff;
	padding: 0.8em;
}
#header h1{
	margin : 0;
	font-size: 1.5em;
	letter-spacing : 3px ;
}
#header h1	a{
	color: #fff;
	background : transparent;
	text-decoration : none;
	font-weight: bold;
} 
/* Contenu */ 
#content {
	font-size : 1em;
	background-color: #fff;
	border: 2px solid #efefef;
	margin: 0 2em 2em 150px;
	padding: 1em 1em 2em 3em;
	z-index: -1;
	width: 100%;
	min-height: 70%;
}

 html>body #content  {
	width: auto;
}

#headerForm{
	margin-top: 1em;
	margin-bottom: 0.5em;
}

#contentForm{
padding-top: 1em;
	width: 100%;
	clear: left;
}

table {
	font-size: 1em;
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}
td{
	vertical-align: top;
}

.tabForm {
	padding: 0.4em;
	border: 2px solid rgb(0,96,160);
}
.tabForm th, .tabForm td{
font-size: 0.8em;
border: 1px solid #fff;
padding: 0.2em 0 0.4em 0.3em;
text-align: left;
}
.tabForm th{
	background: #e1e1e1;
	font: bold;
	color: rgb(0,96,160);
}
.tabForm td{
	background: #efefef;
	width: auto;
	font-weight: normal;
}

#bloca{
width: 30em;
float:left;
border: 2px solid rgb(0,96,160);
padding: 0.3em;
}

#blocb{
margin-left:31em;
border: 2px solid rgb(0,96,160);
padding: 0.3em;
}

J'ai essayé de mettre dans ce code, que ce qui pouvait être interessant pour résoudre mon problème (sous IE)

Merci

Je crois avoir trouvé la solution

Pour que cela fonctionne dans IE, j'ai ajouté une dimension a blocb :

#blocb{
width: 100%;
margin-left:31em;
border: 2px solid rgb(0,96,160);
padding: 0.3em;
}

Mais là cela cassait dans Mozilla.
Donc j'ai ajouté en dessous :

#contentForm>#blocb  {
	width: auto;
}

Et là ca roule c'est simple, mais il faut le savoir...

Merci à tous quand même