Why do my columns wrap with window resize?

Question

I am trying to add four columns, evenly-spaced, on a webpage that keep their structure when the browser window is resized. I built it this way based on a tutorial which I can't find now. They appear fine until you resize the browser window. Can anyone tell me why my 3rd and 4th columns keep wrapping under the first two when the browser window is resized?

#ColumnMain {
  width: 100%;
  height: auto;
  float: left;
  margin-left: auto;
  margin-right: auto;
  min-width: 44%
}

.col1 {
  float: left;
  padding: 10px 20px 15px 20px;
  margin: 0;
  width: 350px;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col2 {
  float: left;
  padding: 10px 20px 15px 20px;
  margin-left: 10px;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
}

.col3 {
  float: right;
  padding: 10px 20px 15px 20px;
  margin: 0;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
  overflow: hidden;
}

.col4 {
  float: right;
  padding: 10px 20px 15px 20px;
  margin-right: 10px;
  width: 22%;
  height: 100px;
  border-left: solid 1px #35488C;
  Overflow: hidden;
}

<div class="columns" id="ColumnMain">
  <div class="col1">content-1</div>
  <div class="col2">content-2</div>
  <div class="col3">content-3</div>
  <div class="col4">content-4</div>
</div>

Answer 1

You have specified different width for first column and other columns, to make it resizeable they should be given percentage width or you have to use bootstrap CSS.

And also with margin it will not work with same percentage width. in this case you have to calculate each column width after applying margin/padding with relative to window/document width and then apply in width style. You have to also calculate the same on window resize event.

Remove margin from your column style and add below one property:

box-sizing:border-box;

For testing purpose I have change your first column width to 200px, better to assign 25% width to each column to test.

#ColumnMain {
      width: 100%;
      height: auto;
      float: left;
      margin-left: auto;
      margin-right: auto;
      min-width: 44%
    }

    .col1 {
      float: left;
      padding: 10px 20px 15px 20px;      
      width: 200px;
      height: 100px;
      border-left: solid 1px #35488C;
      box-sizing:border-box;
    }

    .col2 {
      float: left;
      padding: 10px 20px 15px 20px;      
      width: 22%;
      height: 100px;
      border-left: solid 1px #35488C;
      box-sizing:border-box;
    }

    .col3 {
      float: left;
      padding: 10px 20px 15px 20px;     
      width: 22%;
      height: 100px;
      border-left: solid 1px #35488C;
      overflow: hidden;
      box-sizing:border-box;
    }

    .col4 {
      float: left;
      padding: 10px 20px 15px 20px;     
      width: 22%;
      height: 100px;
      border-left: solid 1px #35488C;
      Overflow: hidden;
      box-sizing:border-box;
    }

<div class="columns" id="ColumnMain">
  <div class="col1">content</div>
  <div class="col2">content</div>
  <div class="col3">content</div>
  <div class="col4">content</div>
</div>