0

I am trying to divide an A4 paper in four quadrants. This HTML/CSS is then fed to a PD converter. Somehow I cannot get the floating divs to align (to form the quadrants).

HTML

<div class="q q1">1</div>
<div class="q q2">2</div>
<div class="q34">34</div>

CSS

@page {
    size: A4;
    margin: 0;
    padding: 0;
}
body, div {
    margin: 0; 
    padding: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}
.q {
    max-width: 50%; 
    max-height: 50%; 
    min-width: 50%; 
    min-height: 50%; 
    width: 50%; 
    height: 50%; 
    display:inline-block;
    border: 1px solid grey;
}
.q34 {
    max-width: 100%; 
    max-height: 50%; 
    min-width: 100%; 
    min-height: 50%; 
    width: 100%; 
    height: 50%; 
    display:inline-block; 
    border: 1px solid grey;
}

Somehow the second quadrant and bottom don't want to fit the model (i.e. move to the next row)

My question: how can I place quadrant 1 and 2 on 1 line (50/50)? how can I place the bottom half on line 2 (50% height/full width)?

Patrick
  • 3,490
  • 1
  • 37
  • 64
snh_nl
  • 2,877
  • 6
  • 32
  • 62
  • Please also read this solution [CSS A4 Printing](http://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size), you may get some help. – Sunil Kumar May 26 '14 at 12:06

1 Answers1

0

Just add this:

.q { float: left; }
.q34 { clear: both; }

html, body{
    height: 100%;
}

http://jsfiddle.net/Niffler/F5AWC/

Niffler
  • 1,645
  • 11
  • 11