Two divs keep switching place - How do I stop this? - html

Question

I have three divs in a column format that have widths as a percent of the window. Once the screen gets to 1300 px or less, I want the two rightmost divs to stop getting smaller and basically overtake the leftmost div (there will be content in the right and middle divs but nothing in the left one). I made a media query that says when the screen gets to 1300px, the left div's width becomes 0, and the middle and right have fixed widths and float right. However, when I do this, the middle and right divs always switch places so that the middle one is all the way to the right and the right one jumps to the left of the middle. How do I stop the two divs from switching places?
I have tried changing the display of the divs to block or inline but nothing has worked.
.column {
float: left;
padding: 10px;
height: 600px;
display: inline-block;
}
.left {
width: 20%;
background-color: red;
}
.middle {
width:60%;
background-color: orange;
}
.right {
width:20%;
background-color: yellow;
}
#media screen and (max-width: 1300px) {
.left {
width: 0px;
}
.middle {
width:765px;
float: right;
}
.right {
width: 255px;
float: right;
}
}
<div class="columns">
<div class="column left"></div>
<div class="column middle">
<h3>Lorem Ipsum </h3>
</div>
<div class="column right">
<div class="form-box"></div>
</div>
</div>
After the window becomes less than 1300px, I just want the middle and right columns to float right with the middle one to the left of the right one, but instead they always switch places.

Answer 1

You will be better suited using flexbox to do what you are trying to do. Also, you used the CSS class .column instead of the .columns definition you have in your css.
Try this:
.columns {
padding: 10px;
height: 600px;
display: flex;
flex-direction: row;
/*flex-wrap: wrap;*/
}
.left {
flex: 1 1 auto;
width: 20%;
background-color: red;
}
.middle {
flex: 1 1 auto;
width: 60%;
background-color: orange;
}
.right {
flex: 1 1 auto;
width: 20%;
background-color: yellow;
}
#media screen and (max-width: 1300px) {
.left {
display: none;
}
.middle {
width: 500px;
flex: 1 0 auto;
}
.right {
width: 500px;
flex: 1 0 auto;
}
}
/*#media screen and (max-width: 650px) {
.middle {
width: 100%;
}
.right {
width: 100%;
}
}*/
<div class="columns">
<div class="column left"></div>
<div class="column middle">
<h3>Lorem Ipsum </h3>
</div>
<div class="column right">
<div class="form-box"></div>
</div>
</div>