Placer une div menu latéral à un centré div

J'ai trouvé beaucoup de variantes à cette question, mais il semble que peu importe ce que j'essaie je ne peux pas obtenir ce (apparemment très simple!) chose que de travail!

Ce que je suis en train de faire est de conserver le 'centré' div dans le centre de la fenêtre, et à la 'sidebar' div directement à sa droite (c'est à dire pas aligné à droite de la fenêtre d'affichage) sans affecter le centrage de l' 'centré' div.

Voici un code de test sur jsfiddle:

http://jsfiddle.net/6wCyr/13/

Tout ce que j'ai lu semble impliquer que l' float propriété est exactement ce que je recherche, mais les résultats sur le lien afficher que j'obtiens des résultats étranges dans lequel la barre latérale de droite est placé ci-dessous l' 'centré' div plutôt qu'à côté d'elle. C'est ce qui est indiqué dans le lien.

J'ai aussi vu une solution impliquant l'aide d'une valeur négative pour le droit de la propriété, et le réglage de la largeur de la barre latérale exactement, mais je ne pouvais pas obtenir que l'on va soit.

Espérons que cette question est facile à résoudre car je pense qu'il devrait être! N'arrive pas à trouver le bon ensemble de div à l'intérieur de div et ainsi de suite. Difficile à déboguer ces problèmes d'alignement!

Merci!

OriginalL'auteur aardvarkk | 2011-03-01

4

De l'essayer.

http://jsfiddle.net/DOSBeats/6wCyr/16/
```
.holder {
    margin:0 auto;
    width:100px;
}

.centered {
    border: dashed;
    float:left;
    height: 100px;
}

.sidebar {
    border: dotted;
    float:left;
    margin-right:-100px;
    width:100px;
}
```
Me semble bon! C'est un peu confus pour moi la façon dont j'ai besoin pour définir la largeur et la marge de la titulaire, et de l'ensemble de la flotte de l'centré et barre latérale, etc., mais il semble produire le résultat que je cherchais. Merci!
C'est un peu déroutant, mais voici l'essentiel. Nous allons d'abord faire les bases de la configuration avec le titulaire de la largeur afin que nous puissions centre de la boîte principale. Puis en flottant à la fois centré et la barre latérale gauche nous glisser les uns à côté des autres...seulement ils mettent sur le dessus de chaque autre à cause de la largeur du titulaire élément. Nous avons ensuite défini la marge de droite d'une largeur négative qui déplace juste le sur là où nous voulons. Il peut être un peu déroutant, mais vous devez activer chose à un moment de sorte que vous pouvez voir ce qu'il fait.

OriginalL'auteur Seth
5

Démo
- J'ai déménagé div.sidebar à l'intérieur de div.centered.
- J'ai ajouté position: relative à div.centered.
- Nous utilisons cette technique.
- Vous n'avez pas à déclarer une largeur fixe sur div.sidebar.
CSS:
```
div.centered {
    margin-left: auto;
    margin-right: auto;
    border: dashed;
    width: 100px;
    height: 100px;
    position: relative
}

div.sidebar {
    border: dotted;
    position: absolute;
    top: 0;
    left: 100%
}
```
HTML:
```
<div class="holder">
    <div class="centered">
        CENTERED
        <div class="sidebar">
            RIGHT SIDEBAR
        </div>
    </div>
</div>
```
Merci pour la suggestion! Les seuls inconvénients de ce rapport à l'approche de @Seth ci-dessous sont les suivantes: 1) Il s'agit de mettre la barre latérale de la div à l'intérieur de la div centré, ce qui semble un peu plus sale pour moi, et 2) La partie supérieure des deux divs ne semble pas être aligné correctement, alors qu'ils sont dans l'autre solution de @Seth. Merci!
Il est vraiment facile à résoudre ce problème. C'est compensée par la border hauteur. Fixe: jsfiddle.net/6wCyr/32 - j'aurais fixé en premier lieu.
J'aime aussi beaucoup la façon dont il n'y a pas de largeur fixe sur la barre latérale!

OriginalL'auteur thirtydot

Si vous ne définissez pas une largeur à votre titulaire et centre, la barre latérale va flotter sur le bord de la fenêtre.

Essayez ceci:

HTML:

<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>

CSS:

#holder{
  margin:auto;
  width:500px;
}
#sidebar{
  border:dotted;
  float:left;
  width:100px;
}
#centered{
  border:dashed;
  margin-left:110px;
  width:380px;
}

OriginalL'auteur Will

Vous devez vous connecter pour publier un commentaire.