fishingfreak07
New Member
I'm a bit of a CSS noob and I was hoping someone here would have the patience to point out the error of my ways.Basically, I'm creating a mobile web platform and I'm designing a concept "landing page" which will consist of four equally sized rectangular (square on some resolutions) tiles (inspiration drawn from here: http://tinyurl.com/beartss).Obviously with this application being mobile orientated I've been avoiding fixed widths and heights but can't quite get the same layout as seen in the image I linked. My HTML is laid out as follows:\[code\] <div class="page-container"> <div class="tile-1"></div> <div class="tile-2"></div> <div class="tile-3"></div> <div class="tile-4"></div> </div>\[/code\]And the current CSS I'm using is...\[code\]html, body, .container { height: 100%; min-height: 100%;}.page-container { margin: 0 auto; border: 1px solid black; height: 99%; min-height: 99%; width: 99%;}.tile-1 { border: 1px solid black; height: 48%; width: 48%;}.tile-2 { border: 1px solid black; height: 48%; width: 48%;}.tile-3 { border: 1px solid black; height: 48%; width: 48%;}.tile-4 { border: 1px solid black; height: 48%; width: 48%;}\[/code\]This isn't even remotely near what I'm trying to achieve, and I've come by a rumour that percentage based height is never a good idea, either way, the above CSS gives me this: http://i.imgur.com/nXbcHze.pngAny help would be appreciated, I'm sure I've just missed something with the height.