CSS - briser un flotteur et un div non Wrappable

Question

Ok, cela est difficile à expliquer, j'ai 2 éléments, un div flottant et un div non Wrappable, son HTML ressemble à ceci:

<div id='page'> 
    <div id='left'> 
    some information 
    </div> 
    <div id='center'> 
    do not break this 
    </div> 
</div> 

Ce

est le CSS:

#center{ 
    text-align: center; 
    white-space: nowrap; 
} 
#left{ 
    float:left; 
} 
#page{ 
    width: 800px; 
    background-color: #999; 
} 

Résultat:

le conteneur (#page) i s redimensionnable et peut aller plus petit, comme 100px, et voici où j'ai mon problème, la div #center garde à droite, même lorsque se trouve en dehors du conteneur:

J'ai besoin #center div va sous #probablement lorsque le conteneur est petit comme celui-ci:

Voici le code sur jsFiddle: https://jsfiddle.net/p41xh4o3/

Merci pour votre aide!

Answer 1

Ok, je l'ai fait en utilisant "flex", sur mes 3 éléments, c'est le CSS:

#left{ 
    white-space: nowrap; 
    flex-grow: 0; 
} 
#center{ 
    text-align: center; 
    white-space: nowrap; 
    background-color: #88AA88; 
    flex-grow: 1; 
} 
#page{ 
    width: 100px; 
    background-color: #999; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
} 

C'est le jsFiddle: https://jsfiddle.net/p41xh4o3/2/

Answer 2

je l'ai fait en utilisant FlexBox, vous devez d'abord faire display: flex; et flex-wrap: wrap sur le parent.
comme ceci:

#page{ 
    background-color: #999; 
    display: flex; // this one makes it a flex box 
    flex-wrap: wrap; // this one tells it to wrap when all children cannot fit next to each other 
} 

Ensuite, vous devez donner flex-basis: 50% pour les enfants du parent:

#center{ 
    flex-basis: 50%; 
    background-color: red; 
} 
#left{ 
    float:left; 
    flex-basis: 50%; 
    background-color: green; 
} 

je leur ai donné fonds afin que vous puissiez les voir et voir comment cela fonctionne. Pensez à flex-base comme la largeur de l'élément. donc si vous voulez #left avoir une largeur: 30% vous ferait quelque chose comme ceci:

#center{ 
    flex-basis: 70%; // notice how this one is 70% because 100% - 30% = 70% 
    background-color: red; 
} 
#left{ 
    float:left; 
    flex-basis: 30%; 
    background-color: green; 
} 

ici est un jsFiddle travail: https://jsfiddle.net/odnecaLu/4/
J'espère vraiment que j'ai aidé