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

Whenever you float an element, do not forget that it has to be cleared, or you would see unpredictable behaviour for the elements that follow it.

You have to specify overflow property, or clear the floats and in doing so create a new block formatting context to let the browser know that it can stop floating the elements then.

See example below when I specify overflow: auto on bigSquare- note that on smaller screen bigSquare will fall below floatRight:

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

<h2>Fun with positions, widths, and heights</h2>

<div class="floatRight">Right column</div>

<div class="bigSquare">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.
</div>

Solution:

So in your case, here is the solution- float your bigSquare too and clear the float after floatRight using this:

<div style="clear: both"></div>

Note you have to specify widths for the floated containers too- otherwise it will wrap (come one below the other)- so specifying a width for bigSquare to adjust for the 100px of floatRight:

  width: calc(100% - 100px);

snippet below:

div.bigSquare {
  max-width: 400px;
  background-color: silver;
  float: left;
  width: calc(100% - 100px);
}
div.floatRight {
  float: right;
  width: 100px;
  height: 200px;
  background-color: pink;
}

<h2>Fun with positions, widths, and heights</h2>

<div class="floatRight">Right column</div>

<div class="bigSquare">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.
</div>
<div style="clear: both"></div>

Simplest solution:

Don't use floats- use a flexbox:

.flexbox {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse; /*wrap if window width less than combined min-widths*/
}
div.bigSquare {
  background-color: silver;
  flex: 1 0 200px;/*set min-width*/
}
div.floatRight {
  width: 100px;
  height: 200px;
  background-color: pink;
  flex: 1 0 100px;/*set min-width*/
}

<h2>Fun with positions, widths, and heights</h2>

<div class="flexbox">
  <div class="floatRight">Right column</div>

  <div class="bigSquare">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.
  </div>
</div>

Answer 2

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;
}

<h2>Fun with positions, widths, and heights</h2>

<div class="floatRight">Right column</div>

<div class="bigSquare">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.
</div>