28172 sujets

CSS et mise en forme, CSS3

XHTML + CSS Hauteur div / autre div

Salut à tous,

Je travaille sur une mise en page simple 3 divs, voici une capture :

http://www.hebergementimages.com/images/967a5120b098a9e3f4a357ddf0b9d53b_MiseEnPage3Div.png


Voici le code CSS :


        body
        {
            width: 100%;
            margin: 0;
            padding-top: 25px;
        }
        .divOuterPage
        {
            margin-left: auto;
            margin-right: auto;
            width: 800px;
            min-height: 400px;
            background-color: #eeeeee;
        }
        .divOuterPage div
        {
            margin-left: 10px;
            margin-top: 10px;
        }
        .divMenu
        {
            float: left;
            width: 150px;
            background-color: #dddddd;
            min-height: 380px;
        }
        .divAdvertisment
        {
            float: left;
            margin-left: 10px;
            background-color: #dddddd;
            width: 620px;
            height: 80px;
        }
        .divContent
        {
            float: left;
            margin-left: 10px;
            background-color: #dddddd;
            width: 620px;
            min-height: 290px;
        }




<body>
    <form id="form1">
    <div class="divOuterPage">
        <div class="divMenu">
        </div>
        <div class="divAdvertisment">
        </div>
        <div class="divContent">
        </div>
    </div>
    </form>
</html>


Le divMenu et le divContent sont dimensionnés à une hauteur minimale pour que l'écran ressemble à quelque chose lorsqu'il est vide (le tout sert de base de mise en page un CMS)

En fait, j'aimerais que le divMenu s'agrandisse en fonction de la hauteur de dicContent.

Bien entendu, le problème ne se pose pas avec une table mais j'aurais des problèmes pour l'affichage sur les mobiles.

Pourriez-vous m'aider s'il vous parait possible de gérer ce problème ?

D'avance merci

Laurent
Modifié par Igor (25 Sep 2010 - 11:40)
Salut,

Ton aperçu image ne fonctionne pas. Avec cet aperçu on pourra sans doute t'aider Smiley cligne

A plus
Faudrait que tu t'inspires du gabarit 7
En gros, ce n'est pas ton "div.divmenu" qui va contenir ses couleurs de présentation, mais plutôt "div.divOuterPage" avec une image de qui correspond au colonnage. C'est ce qu'on appelle les colonnes factive. Grace à ça, ton "div.menu" fera la même taille que le "div.divcontent".

Par contre, ce serait bien d'échanger les "class" par des "id", comme il s'agit d'objet unique, c'est plus propre.
Modifié par Borak (25 Sep 2010 - 13:20)
Salut,

Merci pour votre aide, bien que l'exemple soit hors ligne est que je ne peux donc pas voir les images, je vais quand même essayer de partir de là.

Je ne savais pas que vous proposiez des gabarits.

Merci

Laurent
Sujet clos
Aller à