At a width of around 960px wide and lower, I would like the div .mainarticle to be first, the div .asideleft to be second, and the div .asideright to be last, all stacked vertically instead of horizontally as they are now. In the HTML the order, as you can see, is .asideleft, .mainarticle, and .asideright.
I have tried pretty much every combination of float/clear except of course the correct one.
How can I accomplish this?
Thanks is advance for any help you guys can provide.
@Paulie, - left, main, right. I got that particular pen to work with flex on webkit, but either my moz and ms prefixes are wrong or the syntax is wrong. There's a live page here: http://garrisonassetmanagement.com/flex.html#
but it doesn't work with moz or ms. The flex spec is now CR but is moving so fast it's hard to keep up with current browser implementation syntax.
@Hugo - thanks to Paulie from an earlier post, the container and columns are flexible already, so I just need to stack them at < ~ 960px for iPad portrait and iPhone. Flex is where I want to end up, but also need something that works currently.
That way, it will be stacked on top of eachother in mobile.
For above 960, I guess the "easiest" way is to use some "trickery" and absolute positioning and such, but of course that comes with it's own problems. A bit like this: http://jsfiddle.net/senff/VdRSj/
I tried some things about your problem. First, I have to agree with TheDoc and Senff: the correct markup is the following.
.main
.aside-left
.aside-right
The best I could get with floats and only floats (so no huge paddings, no absolute positioning, etc.) is this: http://jsfiddle.net/aJ7Ss/. However, the main content isn't on the middle, which sucks.
I don't think we can achieve this effect from this markup with floats only. From there, you have 2 options: flexbox or tricks.
Consider this pen:
http://codepen.io/GAtkins/pen/hqBpv
At a width of around 960px wide and lower, I would like the div .mainarticle to be first, the div .asideleft to be second, and the div .asideright to be last, all stacked vertically instead of horizontally as they are now. In the HTML the order, as you can see, is .asideleft, .mainarticle, and .asideright.
I have tried pretty much every combination of float/clear except of course the correct one.
How can I accomplish this?
Thanks is advance for any help you guys can provide.
Glenn
What order should they be in if the screen is wider than 960px?
When you want a single column layout instead of a multiple columns layout under a given screen width, you'd go with:
Now, if you only want to change the order of content according to screen size, you'll have to use CSS regions which are not very supported yet.
More about it here: http://css-tricks.com/content-folding/
@Paulie, - left, main, right. I got that particular pen to work with flex on webkit, but either my moz and ms prefixes are wrong or the syntax is wrong. There's a live page here: http://garrisonassetmanagement.com/flex.html#
but it doesn't work with moz or ms. The flex spec is now CR but is moving so fast it's hard to keep up with current browser implementation syntax.
@Hugo - thanks to Paulie from an earlier post, the container and columns are flexible already, so I just need to stack them at < ~ 960px for iPad portrait and iPhone. Flex is where I want to end up, but also need something that works currently.
Thanks.
Glenn
Chrome is the only browser supporting flex currently.
Edit: Opera now supports it since this morning.
As I told you, if you want to go from a 3 columns to a single column layout, remove floats.
@Hugo, that does indeed stack them, but in HTML order as .asideleft, .mainarticle, .asideright. Instead of .mainarticle, .asideleft, .asideright.
http://codepen.io/GAtkins/pen/jmEdK
Thanks.
Glenn
Until flexbox is fully operational, I'd suggest JS.
Instead of JS, I'd just rearrange the HTML. The main content should be coming first, anyways.
HTML order should be:
That way, it will be stacked on top of eachother in mobile.
For above 960, I guess the "easiest" way is to use some "trickery" and absolute positioning and such, but of course that comes with it's own problems. A bit like this: http://jsfiddle.net/senff/VdRSj/
Sorry, I said bullshits about flexbox. It seems every major browser in their latest version now support it.
I tried some things about your problem. First, I have to agree with TheDoc and Senff: the correct markup is the following.
The best I could get with floats and only floats (so no huge paddings, no absolute positioning, etc.) is this: http://jsfiddle.net/aJ7Ss/. However, the main content isn't on the middle, which sucks.
I don't think we can achieve this effect from this markup with floats only. From there, you have 2 options: flexbox or tricks.
I'd go with both.
http://codepen.io/wolfcry911/pen/IzvCF
Thanks wolf, I'm gonna study that code.
Glenn
Are you looking for something like this
http://codepen.io/anon/pen/Agjno