Grow your CSS skills. Land your dream job.

Need A Float Expert, Please

  • # October 8, 2012 at 9:45 pm

    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

    # October 9, 2012 at 4:31 am

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

    # October 9, 2012 at 4:45 am

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

    # October 9, 2012 at 9:53 am

    @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

    # October 9, 2012 at 9:56 am

    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.

    # October 9, 2012 at 10:27 am

    @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

    # October 9, 2012 at 10:41 am

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

    # October 9, 2012 at 1:49 pm

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

    # October 9, 2012 at 2:39 pm

    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/

    # October 9, 2012 at 4:36 pm

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

    # October 9, 2012 at 4:47 pm

    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.

    # October 9, 2012 at 9:03 pm

    Thanks wolf, I’m gonna study that code.

    Glenn

    # October 10, 2012 at 1:20 am

    Are you looking for something like this

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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".