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>