Floating DIV giving precedent on resize

Question

I am new to CSS and just graduating from Tables. I am not even sure how to phrase this title. I am struggling with how CSS works and how things are handled. I have made a layout and page that I am currently happy with. Because of the content on the page its likely that the users will resize the page. column left and right are not nearly as important as the middle column. For ease of use its best to be on top.

My page layout at normal size is:

--------------------
|-------------------|
||    |       |    ||
||    |       |    ||
||Left|  Mid  |Right|
||    |       |    ||
||    |       |    ||
||    |       |    ||
|------------------||
|__________________||

When I resize smaller it becomes the layout shifts:

----------------
|--------------|
||    |       ||
||    |       ||
||Left| Right ||
||    |       ||
||    |       ||
||    |       ||
|--------------|
|     Mid      |
|______________|

I would like is middle to always be the top:

----------------
|--------------|
||            ||
||    Mid     ||
||            ||
||            ||
||            ||
||            ||
|--------------|
| Others       |
|              |
|______________|

My CSS:

#page-wrap {
position: left;
display: inline-block;
}

#left {
width: 239px;
height: 711px;
float: left;
}

#mid {
width: 600px;
height: 600px;
float: left;
margin-left: 5px;
}

#right {
width: fit-content;
height: 300px;
margin-left: 5px;
float: right;
}

My webpage is layout:

<div class="container">
    <div id="page-wrap">
        <div id="left"></div>
        <div id="right"></div>
        <div id="mid"></div>
    </div>
</div>

How can I get my page to behave properly?

Answer 1

If you can, I would recommend using flexbox instead of floats for layout.

You can read a good introduction to flexbox here.

The snippet below is how you might approach your layout using flexbox. I have changed your HTML so that the mid content appears first. We can use the order property to move the layout around on resize.

You can change the em units to pixels if you need.

jsfiddle

#page-wrap {
  display: flex;
  background: lightblue;
}

#mid {
  flex: 1 1 40em;
}

#left {
  flex: 0 1 15em;
  order: -1;
}

#right {
  flex: 0 1 15em;
}


/* specificy when you want the layout to change */

@media (max-width: 800px) {
  #page-wrap {
    flex-direction: column;
  }
  #left {
    order: 0;
  }
}


/* styling for demo */

#left,
#mid,
#right {
  border: 1px solid white;
  font-family: sans-serif;
  font-size: 2em;
  height: 600px;
}

<div class="container">
  <div id="page-wrap">
    <div id="mid">middle content</div>
    <div id="left">left sidebar</div>
    <div id="right">right sidebar</div>
  </div>
</div>