Rotating div's, absolute positioning and responsive-ness

css, html

Solution

I figured out how to do this!

I've used these sources: http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/ How to vertically center a div for all browsers?

I had to apply multiple wrappers and by using padding-bottom I managed to get responsive squares. JSfiddle: http://jsfiddle.net/ZC9et/

HTML:

<div class="outer"><div class="middle"><div class="wrap"> <!-- Open .wrap -->

  <div class="box side left"><!-- Open .box -->
    <a href="#" class="boxInner innerLeft"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->

  <div class="box"><!-- Open .box -->
    <a href="#" class="boxInner innerMiddle"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->

  <div class="box side right"><!-- Open .box -->
    <a href="#" class="boxInner innerRight"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->

  </div></div></div><!-- Close .wrap -->

CSS:

body {
        margin: 0;
        padding: 0;
        background-color:#1b1b1b;
    }

    .outer{
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .middle{
        display: table-cell;
        vertical-align: middle;
    }
    .wrap {
        margin: 10px;
        margin-left: auto;
        margin-right: auto; 
        height:100%;
        overflow: hidden;


        -webkit-box-align:center;
        -webkit-box-pack:center;
        display:-webkit-box;
    }

    .box {
        float: left;
        position: relative;
        width: 24.45%;
        padding-bottom: 24.45%;

        margin:auto;

        top:0;
        bottom: 0;
        left: 0;
        right: 0;

        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .side {
        width: 17.57%;
        padding-bottom: 17.57%;
    }

    .left{
        left:-8%;
    }

    .right{
        left:8%;
    }

    .boxInner {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        overflow: hidden;

        background-size: cover;
        background-repeat:no-repeat;
    }

    .innerLeft{
        background-color:blue;
    }
    .innerMiddle{
        background-color:blue;
    }
    .innerRight{
        background-color:blue;
    }

Problem

I'm trying to code a design I've made in photoshop earlier, but I have the feeling I'm not doing things the 'right' way and that there should be another, better way, to achieve what I want. To rotate the div's and keep it a link with the 100% width a href attribute, I've used transform. But this way everything inside get's turned 45deg too. Is there maybe a better way to achieve it? Because I want to add Jquery later, and it would be nice not having to rotate every little thing that I add in these divs. ``` -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); ``` I would really like the website to be responsive, but for some reason the height doesn't want to join in with the rest of the percentages. For example, I want div#midden to be 24% of the height but keep it square. I can't figure out how to do this. http://jsfiddle.net/AeFcY/1/ And, last, the positioning. I want the whole thing to be in the center of the page, but the only way I figured out to do this with margin: 0 auto and absolute positioning. But, this gives one hell of a job positioning the divs next to each other... Right now I've positioned them by changing the 'right' attribute from 855px to -855px. HTML code: ``` <!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8" /> <title>imandragrafie</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="wrapper"> <div id="links" class="zijden draai"><a href="#"></a></div> <div id="midden" class="draai"><a href="#"></a></div> <div id="rechts" class="zijden draai"><a href="#"></a></div> </div> </body> </html> ``` CSS: ``` html, body, div#wrapper{ background-color:#1b1b1b; width:100%; height:100%; margin:0; padding:0; } div.draai{ display:inline; padding:0; overflow:hidden; position:absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-size: cover; } div#midden{ width:333px; height:333px; top:0; bottom: 0; left: 0; right: 0; margin:auto; background-image:url('../images/home_midden.png'); } div.zijden{ width:241px; height:241px; top: 0; bottom: 0; margin:auto; background-color:blue; } div#links{ background-image:url('../images/home_links.png'); left: 0; right: 855px; } div#rechts{ background-image:url('../images/home_rechts.png'); left: 0; right: -855px; } a{ width:100%; height:100%; padding:0; margin:0; position:absolute; right:0; } ```

Original source

Related problems