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

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.

Solution:

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

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

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.

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*/
}

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.