Div et largeur automatique

Bonjour,

Je dois faire une mise en page sur deux colonne, avec un sous menu:

<div id="container">
    <div id="submenu">
        <h4>Sous menu</h4>
        <ul>
           <li><a href="#" title="#">Lien</a></li>
           <li><a href="#" title="#">Lien</a></li>
           <li><a href="#" title="#">Lien</a></li>
           <li><a href="#" title="#">Lien</a></li>
        </ul>
    </div>

    <div id="content">
        <p>Content</p>
    </div>
</div>

Mais je n'ai pas toujours de sous menu, donc si pas de sous menu, voici le code généré:

<div id="container">
    <div id="content">
        <p>Content</p>
    </div>
</div>

Ma div #content doit prendre toute la largeur...

Le code CSS quand j'ai mon sous menu:

#submenu {
    width: 200px;
    float: left;
}

#content {
    margin-left: 200px;
}

Quand j'ai pas de sous menu-menu, il faudrait que mon margin-left disparaisse....comment faire pour que ça prenne automatiquement toute la largeur?

Merci d'avance

La seule solution que je vois est de passer via la valeur css display: table-cell. (Il faudra évidemment que son parent soit en display: table-row)

Ainsi lors de la disparition du sous menu, comme avec un tableau, la cellule restante prend toute l'espace disponible.

Ça marchera sous IE8 et plus.

Pour IE6-7 (si tu prends en charge, IE7 est quand même à seulement 5% d'utilisation, et ie6 moins de 1%), bin reviens avec ton code actuel en float et tant pis pour eux. Ce sera navigable au moins.

Voilà un exemple pratique:
http://www.ie7nomore.com/css2only/table2/

Bonjour,

Merci pour la réponse rapide.

On ne supporte plus IE6, mais encore IE7..quoi que j'hésite...

Il y a vraiment que cette solution?

Une autre solution serait de servir du JS...mais je préfère éviter pour l'instant...

Merci

Ton lien est vraiment cool Vaxilart merci