Tableau à Div, pas si facile... À L'AIDE

Bonjour, je commence en ce qui concerne le XHTML, le CSS et les DIV. J'ai longtemps fait des sites avec ces horribles tableaux et ces vielles balises font. Je me suis réveillé en visitant votre site. SVP. Aidez-moi à quitter l'âge de pierre.

Je veut faire une section ayant la forme suivante (bien-sûr je vais utiliser d'autre polices de caractère et d'autres couleurs inquiètez vous pas ):


Cette page s'affiche correctement dans IE (qui est surement trop lache) mais dans FireFox et Netscape7 la DIV principale ne se redimensionne pas correctement. Quel est le problème? Voici mon code:

h1 {font-size: 15pt;font-family: verdana;margin-bottom: 0;font-weight: normal;color: #369;border:1px solid #888;border-bottom:0}

.cg{background:#eee;border:1px solid #888; height:0.1em; color:blue; height:.1em}

.lg{float:left}
.lg{width:25%}
.lg a{display:block}

#t4, #c4{width:530px; padding:4px 10px}
#ic4{float:right;}

<h1 id="t4">
	Titre 4
</h1>
<div class="cg" id="c4">

	<div id="ic4">
		<img src="image.jpg" width="150" height="150" alt="Image 4" />
	</div>

	<div>
		Bonjour, ceci est le texte, il peut faire plusieurs lignes etc, bla bla bla, ça continue, etc
	</div>

	<div class="lg">
		<a href="a">Lien C1</a>
		<a href="a">Lien C1</a>
		<a href="a">Lien C1</a>
		<a href="a">Lien C1</a>
		<a href="a">Lien C1</a>
		<a href="a">Lien C1</a>
	</div>

	<div class="lg">
		<a href="a">Lien C2</a>
		<a href="a">Lien C2</a>
		<a href="a">Lien C2</a>
		<a href="a">Lien C2</a>
		<a href="a">Lien C2</a>
		<a href="a">Lien C2</a>
	</div>
</div>

Est-ce une movaise utilisation des DIV? Y'a t-il un moyen de faire la même chose avec une liste? SVP aidez-moi.

Salut,
le fait qu'IE agrandisse ton conteneur est en fait un bug par rapport aux specs CSS

Il faut utiliser un élément de block avec clear: both; pour régler le problème.
Cet élément placé à la suite de ton float.

Voir la FAQ et la recherche pour plus d'explications

Salut,

D'un point de vue sémantique, j'aurais plus écrit ton code sous la forme:

<h1> </h1>

<div>

<img src="" alt="" />

<p> </p>

<ul>
<li> <a href=""> </a> </li>
...
</ul>

<ul>
<li> <a href=""> </a> </li>
...
</ul>

</div>

@+