Need A Float Expert, Please

[GAtkins]

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

[Paulie_D]

What order should they be in if the screen is wider than 960px?

[Kitty Giraudel]

When you want a single column layout instead of a multiple columns layout under a given screen width, you’d go with:

.mainarticle,

.asideleft

.asideright {

float: left;

}

@media screen and (max-width: 960px) {

.mainarticle,

.asideleft,

.asideright {

float: none;

}

}

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: https://css-tricks.com/content-folding/

[GAtkins]

@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

[Kitty Giraudel]

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.

[GAtkins]

@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

[Kitty Giraudel]

Until flexbox is fully operational, I’d suggest JS.

[TheDoc]

Instead of JS, I’d just rearrange the HTML. The main content should be coming first, anyways.

[Senff]

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/

[Kitty Giraudel]

Sorry, I said bullshits about flexbox. It seems every major browser in their latest version now support it.

[Kitty Giraudel]

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.

I’d go with both.

[wolfcry911]

http://codepen.io/wolfcry911/pen/IzvCF

[GAtkins]

Thanks wolf, I’m gonna study that code.

Glenn

[Sunny]

Are you looking for something like this

http://codepen.io/anon/pen/Agjno

[Author]

Posts