html - Float 5 Different Size Boxes In Order And Make Fill Wrapper With CSS -

i'm trying float 5 boxes in specific order, shown in first diagram. boxes same size except 1 same height 2 boxes + space between them (but seems killer):

key points here are:

a: each of 5 'boxes' div element, , crucially has border drawn css (we'll shortly see causes issues padding/margins)

b: red circle 1 - image 3 cannot exact correct height still need bottom border of box 3 in line bottom border of box 2

my html is:

<div class="hpcategorypagewrapper">     <div class="hpcategorytopwrapper">         <div class="hpcategorytopleftwrapper">             <div class="hpcategory">                 <h1 class="hpcategory">title one</h1>                 <h3 class="hpcategory">subtitle one<br /><img src="/image1.jpg" /></h3>             </div>             <div class="hpcategoryspacer"> </div>             <div class="hpcategory">                 <h1 class="hpcategory">title two</h1>                 <h3 class="hpcategory">subtitle two<br /><img src="/image2.jpg" /></h3>             </div>         </div>         <div class="hpcategorytoprightwrapper">             <div class="hpcategory">                 <h1 class="hpcategory">title three</h1>                 <h3 class="hpcategory">subtitle three<br /><img src="/image3.jpg" /></h3>             </div>         </div>     </div>     <div class="hpcategoryspacer"> </div>     <div class="hpcategorybottomwrapper">         <div class="hpcategoryleft">             <h1 class="hpcategory">title four</h1>             <h3 class="hpcategory">subtitle four<br /><img src="/image4.jpg" /></h3>         </div>         <div class="hpcategoryright">             <h1 class="hpcategory">title five</h1>             <h3 class="hpcategory">subtitle five<br /><img src="/image5.jpg" /></h3>         </div>     </div> </div> 

i think need html in order because use different css show boxes in following order mobile devices (but don't worry css, should easy):

the css using try , achieve layout showed in image 1 is supposed create following sized divs (artistic licence taken on drawing div boxes can seen - in reality these lines on top not next each other):

the css code wrote is:

h1.hpcategory { font-size: 45px; color: #00bfff; text-align: center; font-weight: 700; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.8em; } h3.hpcategory { font-size: 30px; color: #00bfff; text-align: center; font-weight: 600; margin-top: 5px; margin-bottom: 0; padding-bottom: 0; line-height: 0.7em; } img.hpcategory { margin: 0; padding: 0; }  div.hpcategorypagewrapper { width: 100%; } div.hpcategorypagetopwrapper { width: 100%; height: 100%; clear: right; padding-bottom: 20px; overflow: hidden; } div.hpcategorypagebottomwrapper { width: 100%; padding-top: 20px; } div.hpcategorytopleftwrapper { width: 49%; float: left; } div.hpcategorytoprightwrapper { width: 49%; height: 100%; float: right; clear: right; } div.hpcategory { border: 3px solid #00bfff; } div.hpcategoryleft { width: 49%; float: left; border: 3px solid #00bfff; } div.hpcategoryright { width: 49%; float: right; border: 3px solid #00bfff; } div.hpcategoryspacer { height: 25px; width: 100%; clear: right; } 

however layout comes out looking this:

the problems are:

red circle 2: box 3 has not extended down bottom of box 2. further, box 4 has been placed box 3 should have extended to.
no matter how try , force height of either 'hpcategorypagetopwrapper' or 'hpcategorytoprightwrapper' 100%, won't obey. tried adding 'overflow: hidden' in intuitive places in css stackoverflow solution hasn't helped.

red circle 3: there no horizontal spacer between row 2 of boxes , row 3 (e.g between box 4 , 5). strange same technique did create spacer between box 1 , box 2.

in attempt try , resolve red circle 2 (box 3 won't take 100% of wrapper's height) created image right height force bottom border of box 3 in line bottom border of box 2. isn't perfect , don't line i can't use final, result better:

the newer problems are:

red circle 4: image 3 can never exact right height different browsers rendering different gaps between text (especially on mobile) , bottom borders of box 2 & 3 don't line up.

red circle 5: crazy crazy reason horizontal gap between box 4 , 5 smaller between box 1/2 , box 3. can't work out why given box 1, 3, 4 , 5 set @ 49% width. tried inserting

margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; 

into css div elements ensure wasn't different margins/padding messing , didn't help.

how can work?

crucially:

• i need box 3 extend exact height of bottom border of box 2 without knowing how many pixels (varies between browsers because of differences in rendering horizontal gaps between text).
• i want able add horizontal space between box 1 , box 2 'margin-bottom: 30px' in css (instead of ridiculous spacer div i've created), because of box borders not work - margin ends on inside of border instead of outside!
• i need vertical spacing between box 4 , box 5 same between box 1/2 , box 3.

please me css , html - don't know js won't able use solution involving that.

i've spent ages on , i'd appreciate help. html , css knowledge 10 years old , outdated need put website new business i'm starting i've done best learn divs , 'html5' vs old tables , tr , tds used love, i've hit brick wall...

is general idea have in mind? my fiddle

i have few more thoughts, want see if have on right track.

.block {     width:48%;     float:left;     margin:1%;     background:#ccc; } .wrap-three {     position:relative;     width:100%;     height:auto;     float:left; } .block-one {     height:46%;     float:left;    margin-bottom:3%; } .block-two {     height:46%;    margin-top:3%;     position:absolute;     left:0;     bottom:0; } .block-three {     height:300px; }