Where there is a will, there is a way! A big drawback with using a framework that uses semantics such as “six columns of alpha” and “ten columns of omega” is that they create an expectation of visual ordering. Six columns are on the left, ten columns are on the right, and the alpha / omega naming conventions affect the fields because the order is right in the markup. I think you came across an unexpected use case for the author.
(By the way, your ten column also contains images that overflow their containers, i.e. they don't change)
Direct goods:
My honest advice for future maintainability is to learn from the skeleton, take what you want from it, understand what different classes are doing ... and invent it.
For example, what you have on the main page is a collection of function containers. The markup should look consistent, for example:
<div class="featurebox"> <div class="media">Image, slider, or other visual interest items here</div> <div class="items">Text of items of interest</div> </div> <div class="featurebox"> <div class="media">A different image, slider, etc</div> <div class="items">More text of items of interest</div> </div>
And then you can create them to create an effect on the left. The key here is in the selectors. Floating on the right and not left for the div inside each other function block, our effect is easily achieved:
.featurebox { width: 600px; overflow: hidden; clear: both;} .featurebox div { float: left; } .featurebox:nth-of-type(odd) div { float: right; } .items { width: 200px } .media {background-color: grey; width:400px; height: 100px;}
Fiddle: http://jsfiddle.net/7qRfh/
The problem with changing what you currently have is that it is not very suitable for skeletal waiting for laying from left to right. If you want to say "phooey", you can identify your containers, target every second and flip the orientation of the float .columns . You also need to redefine the behavior of the omega and alpha class so that the omega acts like alpha and vice versa. The mess is in my opinion, but it will work.
Hack
I just had a violin, and I think I closed it. Cannot find the url in my history, so I may not have saved it in the first place .: - /
But it doesn’t matter. It came down to the following: you can do what you need to do with your current markup, but changes to CSS are even more extensive and become nutty.
The container already has a position: absolute, so you need to expand the “six” and “ten” columns, place them absolutely, with “ten” on top and “six” at the bottom. The big problem is that this is easy to do, the container, as well as the six and ten should all have a height set on them. Absolute positioning takes an element from the flow of documents, so without height it just becomes an overlapping weird mess.
Honestly, if you insist on the skeleton as it is, and the markup is the case, then the most reasonable hack is actually JavaScript. If you already have jQuery on your page, everything is simpler.