Grow your CSS skills. Land your dream job.

Responsive web-design Hierarchy of information

  • # July 4, 2013 at 2:30 pm

    Hello,

    This is my first post, I am currently working on a responsive website design and wanted to know if what I was trying to achieve was possible before I move to the coding stage.

    I want to create a hierarchy within the responsive website design where things don’t simply fall underneath each other. I have drawn two very simple diagrams of what I am looking to achieve. Does anyone know if this is possible to get this effect? And if so, what I would need to implement into my code other then float left and right for the opposing sides.

    [Diagram 1](http://i40.tinypic.com/nyd16a.jpg “Diagram 1″)
    [Diagram 2](http://i41.tinypic.com/ip5aq8.jpg “Diagram 1″)

    Thank you in advance,

    Justin

    # July 4, 2013 at 2:31 pm

    Just a note that the coloured boxes represent images and the grey lines, text. As I said it is a simple rough diagram to show what I mean :)

    # July 4, 2013 at 3:15 pm

    See ‘FlexBox”.

    http://css-tricks.com/snippets/css/a-guide-to-flexbox/

    # July 4, 2013 at 4:24 pm

    Thanks for the comment,
    My only issue with FlexBox is the browser support for it. It is not yet ready to be used mainstream on live projects. And the website I am designing is for a large company. I will keep looking

    # July 4, 2013 at 5:06 pm

    With some creative ordering of the divs both layouts are possible but might get messy :P

    Diagram 1:
    http://codepen.io/waylaid/pen/CEIyL

    Diagram-2:
    http://codepen.io/waylaid/pen/auJGp

    Drag to 480px to see the media query.

    Edit: I’ve only looked in Chrome.

    # July 4, 2013 at 7:03 pm

    And actually, neither work properly if you don’t have enough content in the left column.

    # July 5, 2013 at 10:39 am

    If you’re still interested I’ve re-jigged this and it seems to work now. I placed the green and pink blocks in a wrapper and floated that (and cleared right) instead. Have a look, try reducing the amount of text and it should still keep the layout. Fiddly though. Any thoughts?

    Diagram 1: http://codepen.io/waylaid/pen/hGtFE

    Diagram 2: http://codepen.io/waylaid/pen/IzuAt

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

You must be logged in to reply to this topic.

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