If you want to change the layout of your columns, consider replacing float: left; in your columns class with display: inline;. This will ensure that the columns are displayed next to each other without being pulled in any direction. You can also add some CSS to your end class to align the final column to the left.
The structure of the HTML remains the same, but the updated CSS will look like this:
.columns {
position: relative;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
display: inline;
}
.end {
float: left;
}
All other styling in your CSS should remain unchanged.
You can see the result on Jsfiddle here: fiddle
I noticed that my code aligns all the divs on the same row, while yours aligned them beneath each other. If you prefer the second option where the last div is to the left and the first three are under it, please let me know so I can adjust the code accordingly.
Update
Based on the new requirement, I have made the following changes to the code:
Revised CSS:
.arange_to_left {
float: left;
width: 25%;
}
.arange_to_right {
width: 70%;
float: right;
}
.columns {
position: relative;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
padding-bottom: 10px;
}
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5rem;
}
Updated HTML (simplified):
<div class="row">
<div class="arange_to_right">
<div class="small-9 push-3 columns">1. Something</div>
<div class="small-9 push-3 columns">2. Something else</div>
<div class="small-9 push-3 columns">3. Anything else</div>
</div>
<div class="arange_to_left small-3 pull-9 columns">SIDE BAR</div>
</div>
View the updated layout on this fiddle: result
Please note that there is a gap between the left and right divs for potential borders or padding. Feel free to adjust the percentages as needed.
The row div may not expand to contain its floated children. To address this, I have provided an example in this demonstration with additional CSS for the end class.
.end {
clear: both;
}