Ce bon vieil alignement de div...

Bonjour,

Je suis nouvelle, je suis débutante en css et, ce qui n'arrange rien, on m'a collée sur un ambitieux projet codé en php, twig et tout le bazar. On m'a bien expliquée que le positionnement en absolute, il valait mieux éviter, mais voilà...il m'arrange bien mais je sens bien que c'est du bricolage. Je précise que j'ai parcouru le forum en long, en large, et je sais qu'il y a pleins de sujets là dessus, mais vraiment je ne trouve pas de solution et j'en ai marre de me prendre la tête sur un truc aussi basique que le positionnement des div.

J'en viens à mon problème.
J'ai une boîte de navigation latérale positionnée à gauche de l'écran.
J'ai une div globale, centrée dans l'écran....mais elle refuse de m'obéir (méchante), et va direct au centre, certes, mais EN DESSOUS de la boîte de navigation. C'est très fâcheux. Et elle ne va à la bonne place QUE lorsque je met ma boîte de navigation en position:absolute. Et ça, je n'ai pas le droit, paraît-il.

Je vous met mon code css, sans rien toucher aux positions:

.global-container{
    width: 850px;
    height: 720px;
    margin-left: auto;
    margin-right: auto;
    background-color: whitesmoke;
    padding:10px;
}

.menu-box{
    width: 200px;
    height: 720px;
    background-color: whitesmoke;
    padding:10px;
}

Et là, ma question, c'est comment contourner le positionnement absolute? Est-ce vraiment nécessaire, ou dans ce cas là, ça passe? Comment positionner proprement ces deux div?
Modifié par Nahys (23 Jan 2013 - 11:17)

Salut!

Je ne suis pas un crack en CSS, mais j'ai testé le code fourni et je suis parvenu à 2 solutions, mais je ne sais pas si ce sont les "meilleures" façons de procéder (et si c'est "légal")


Alors voilà:

Première idée:

#global-container{
    margin-top:-740px;
    width: 850px;
    height: 720px;
    margin-left: auto;
    margin-right: auto;
    background: red;
    padding:10px;

}

#menu-box{
    width: 200px;
    height: 720px;
    background: blue;
    padding:10px;
}

<div id="menu-box">menu-box</div>
<div id="global-container">global-container</div>

Seconde idée:

#global-container{
    display:block;
    float:left;
    width: 850px;
    height: 720px;
    margin-left: auto;
    margin-right: auto;
    background: red;
    padding:10px;

}

#menu-box{
    width: 200px;
    height: 720px;
    background: blue;
    padding:10px;
    display:block;
    float:left;
}

<div id="menu-box">menu-box</div>
<div id="global-container">global-container</div>

Le truc, c'est que nous ne savons pas dans quel "contexte" se situent tes blocs. Aussi, il y a peut-être des dépendances par rapport à d'autres éléments.

Mais bon, chez moi ça a marché avec juste ce code-là
Modifié par bat777 (23 Jan 2013 - 14:27)

Merci de ta réponse, Je testerais sûrement, car je sens que ce problème risque de se re-poser. Seulement, j'ai fini par mettre mes deux div dans une div globale; l'une en float:right, l'autre en float:left et voilà. C'est mieux comme ça.

J'en profite pour poser une autre question, probablement très bête, ça fait quoi display:block? C'est important?

Mets celle de gauche en float:left; et ça devrait aller.