Floating un autre div à côté d'un DIV centré

Question

Ok, donc j'ai un site Web et le tout est enveloppé dans un conteneur. Ce conteneur est centré avec marge: auto. Je voudrais faire flotter un morceau de contenu à la droite de ce conteneur centré et l'avoir en quelque sorte sur le côté, peu importe si l'utilisateur redimensionne la fenêtre du navigateur, etc. Je me demande s'il existe un moyen très simple de faites ceci plutôt que d'ajouter un autre div énorme, en lui donnant la largeur et en flottant la partie centrée vers la gauche et le morceau de contenu vers la droite. Merci!

Answer 1

Flottant est la voie à suivre pour cela. Ils colleront toujours ensemble, à moins que le récipient ne soit plus petit que la somme de leurs largeurs. Astuce: assurez-vous que votre récipient est assez large pour contenir les deux div diviseurs internes; Si ce n'est pas le cas, et que l'utilisateur a une fenêtre plus étroite, il en affichera une en dessous de l'autre.

Answer 2

Donner au conteneur div la position de la propriété: relative; placez votre flottant div comme le premier enfant du conteneur div et lui donner

#floatingDiv 
{ 
    position: absolute; 
    top: 0; 
    right: -{widthOfFloatedDiv}; 
} 

Je pense que cela va fonctionner, mais non testé

Bon alors testé et il fonctionne

<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;"> 
    <div style="position: absolute; top: 0; right: -200px; width: 200px;"> 
     <p>Floated DIV</p> 
    </div> 
    <p>container div</p> 
</div> 

Answer 3

Ferroutage sur @NickAllen, vous voulez utiliser le positionnement absolu pour que la largeur de la barre latérale ne soit pas incluse dans le centrage sur le conteneur principal.

#container { 
 
    position: relative; 
 
    width: 500px; 
 
    border: 1px solid #f00; 
 
    margin: 0px auto; 
 
} 
 
#sidebar { 
 
    position: absolute; 
 
    width: 200px; 
 
    right: -200px; 
 
    border: 1px solid #0f0; 
 
}

<div id="container"> 
 
    <div id="sidebar"> 
 
    [ sidebar content ]<br> 
 
    [ sidebar content ]<br> 
 
    </div> 
 
    [content]<br> 
 
    [content]<br> 
 
    [content]<br> 
 
</div>

Answer 4

Peut-être que je suis malentendu votre question, mais est-ce pas ce que vous voulez:

#container { 
 
     width: 960px; 
 
     margin: 0px auto; 
 
    } 
 
    
 
    #sidebar { 
 
     float: right; 
 
    }

<div id="container"> 
 
     <div id="sidebar"> 
 
     some content 
 
     </div> 
 
    </div>

Answer 5

question ancienne, mais qui contribue depuis d'autres les réponses manquaient un peu de ce "quelque chose" et c'est encore sur Google. La manière la plus simple et la plus propre d'y parvenir est de deux enveloppes.

<div class="bigWrapper"> 
    <div class="sidebar">Hello, I'm your sidebar</div>  

    <div class="smallWrapper"> 
    Put the thing you want to center here. 
    </div> 
</div> 

Avec le css suivant:

.bigWrapper { 
    width: 1000px; 
    height: auto; 
    margin: auto; 
} 

.smallWrapper { 
    width: 500px; 
    height: auto; 
    margin: auto; 
} 

.sidebar { 
    width: 250px; 
    float: left; 
    height: auto; 
}