2

Complex Grid Layout, Help!

I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.

The Issue

This image describes what I need the design to look like at three different widths.

I should add, each box will be basically a div with an image, article title and summary within it.

enter image description here

Like to say ... in advanced

Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work

Cory Baumer
  • 397
  • 3
  • 16

1 Answers1

3

The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.

You may want to take a look at: Flexbox and for Comrade IE Flexie.

Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.

All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.

Community
  • 1
  • 1
Maciej Gurban
  • 5,615
  • 4
  • 40
  • 55
  • Im selecting this as the answer because it is a viable option, but also the only answer I got ;-) – Cory Baumer Jul 30 '14 at 23:05
  • HOWEVER, if I remember correctly I ended up getting lucky and with the just the right image dimensions I lucked out and it scaled perfectly ;-) – Cory Baumer Jul 30 '14 at 23:06