0

So I'm trying to make a responsive grid layout for a web re-design I am working on. I started to lay out some placeholders, which can be found in a jsfiddle here.

The width works great; exactly how I want it to.

.half-cell {

        height:70%;

        width:50%;
        background-color: #458bff;
        float: left;
        display:inline;

        background-size:cover;


        }

        .quarter-cell-horiz {
            height:35%;                
            width:50%;
            float: left;
            display:inline;
            background-color:#373737;

        }

However, I am noticing some issues with my height. I'm noticing that at some heights, the placeholders jump out of place. I figure this is because it can't measure out a perfect 70% at every height, the way it can a 50% width.

I'm trying to find a way I can prevent that from happening, while maintaining a specific ratio with each of my placeholders. Preferably, I would like to do so using CSS.

Any help y'all could provide would be great. Thank you for looking at this!

user3453790
  • 3
  • 2
  • have a look at something like http://fluidsquares.com/ which uses a cool trick of using padding-bottom percentage and then an internal absolutely positioned div – haxxxton Aug 06 '14 at 04:48
  • I added a pseudo-element to my grid elements, and gave them all padding-bottom of 75%. This forces the grid items to maintain the 4:3 ratio. I adjusted this as needed throughout the site. Thanks for the help! – user3453790 Sep 07 '14 at 20:34

1 Answers1

0

DEMO

Just like 100% width is equal to windows width we have to make sure height does the same! by applying this css:

html, body{ height: 100%; }

Will make sure that any element that you give height in percentage will depend on window height unless its parent have specific height defined (must be first level child of body).

I have created a class named vertical-row which will create 100% height section which you can then use to define 50% height and so on within it for each row you have. You can go on and make vertical-row-half to take 50% and so on for a vertical grid system.

Imran Bughio
  • 4,811
  • 2
  • 30
  • 53
  • Thanks for the help! I'm a bit of a novice, so I'm sorry if this is a stupid question. I am trying to tinker with this. Basically, I want each row to be 70% of the browser's height, 50% width, until I specify a breakpoint. To do that would I just apply height:70%; to the vertical-row class? Since the vertical-row is the child of body, which is defined as 100% height, I thought defining vertical-row as 70% height would solve the issue. I tried to do that and the cell height doesn't seem to be changing...Would you mind helping me a bit more? Thank you again for taking the time! – user3453790 Aug 06 '14 at 13:42
  • for some reason i cant open your or my old fiddle!! its giving a 404 error. Any ways visit this [fiddle](http://jsfiddle.net/Imran_Bughio/yvj3yh7s/) you will see that different height on vertical-row class works perfectly. – Imran Bughio Aug 07 '14 at 04:53