csscss-floatnowrap

CSS - break a float and a non-wrappable div

Ok, this is hard to explain, I have 2 elements, a floating div and a non-wrappable div, its HTML looks something like this:

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

This is the CSS:

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

Result:

enter image description here

The container (#page) is resizable, and can go smaller, like 100px, and here is where I have my problem, the #center div keeps on the right, even when is outside the container:

enter image description here

I need the #center div goes under #left when container is small like this:

enter image description here

This is the code on jsfiddle: https://jsfiddle.net/p41xh4o3/

Thank you for your help!

Solution

  • Ok, i did it using "flex", on my 3 elements, this is the 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;
}

    This is the jsfiddle: https://jsfiddle.net/p41xh4o3/2/