Make column and main content stay on left or right, as browser is resized

Question

I have a floating right column, that successfully pushes the main content area right when the browser width is reduced. CSS:

div.bigSquare 
{
    min-width:         


        

Answer 1

Adding overflow: auto to div.bigSquare will do the trick.

Setting the overflow property forces the div to create for block formatting context which means that the content will not interact with any floating elements outside of the block.

Reference: https://www.w3.org/TR/CSS2/visuren.html#block-formatting

div.bigSquare {
  min-width: 200px;
  max-width: 400px;
  background-color: silver;
  overflow: auto;
}
div.floatRight {
  float: right;
  width: 100px;
  height: 200px;
  background-color: pink;
}

Fun with positions, widths, and heights

Right column

The main content area has very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very many words in it.
  The main content area has very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very many words in it.