CODEWITHSUNDEEP
css
Adam H
Adam H

Reputation: 1169

Dynamic Tiled Display

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:

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

And the current CSS I'm using is...

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%;
}

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: https://i.sstatic.net/ZmBGP.png

Any help would be appreciated, I'm sure I've just missed something with the height.

Upvotes: 0

Views: 1772

Answers (2)

cimmanon
cimmanon

Reputation: 68319

Normally, block level elements won't appear on the same line as another block level element. So, you need to either float them or change their display to something like inline-block.

http://jsfiddle.net/kyyjg/

You will find that mixing px on your borders with percentages for your dimensions to cause your elements to not take up the right amount of space because of how the box-model works. You might find that adding box-sizing: border-box helpful.

If you're interested in another approach, here's how one might do it using flexbox:

http://jsfiddle.net/LJMdx/4/

html, body {
    height: 100%;
}

.page-container {
    min-height: 100%;
    background: red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1%;
}

.page-container div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-flex: 1 1 48%;
    flex: 1 1 48%;
    margin: 1%; /* optional */
    border: 1px solid;
}

If you don't want the gaps between the tiles, drop the 1% margin and padding: http://jsfiddle.net/LJMdx/3/

http://caniuse.com/#feat=flexbox

Upvotes: 1

Vivek Chandra
Vivek Chandra

Reputation: 4358

Try float:left. Demo -> is that the solution that your looking for?.

Added a min-width on each the tiles so that the template is the same on any resolution.

Upvotes: 1

Related Questions