Give help. Get help.

  • # July 4, 2013 at 2:30 pm


    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]( “Diagram 1”)
    [Diagram 2]( “Diagram 1”)

    Thank you in advance,


    # 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”.

    # 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:


    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:

    Diagram 2:

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

You must be logged in to reply to this topic.