- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘Other’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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 :)
See ‘FlexBox”.
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
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.
And actually, neither work properly if you don’t have enough content in the left column.
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