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

Question

I'm trying to float 5 boxes in a specific order, as shown in this first diagram. All boxes are the same size except one which is the same height as 2 boxes + the space between them (but this seems to be the killer):

Key points here are:

A: Each of the 5 'boxes' is a div element, and crucially has a border drawn by CSS (we'll shortly see this causes issues with padding/margins)

B: Red Circle 1 - Image three cannot be the exact correct height but I still need the bottom border of Box 3 to be exactly in line with the 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 I need the HTML in this order because I will use different CSS to show the boxes in the following order for mobile devices (but don't worry about this CSS, it should be easy):

The CSS I am using to try and achieve the layout I showed in image ONE is supposed to create the following sized divs (artistic licence taken on drawing all the div boxes so they can be seen - in reality these lines would be on top not next to each other):

The CSS code I wrote to do this 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 the layout comes out looking like this:

The problems are:

Red Circle 2: Box Three has not extended down to the bottom of Box 2. Further, Box Four has been placed where Box 3 should have extended to.
No matter how I try and force the height of either 'hpcategorypagetopwrapper' or 'hpcategorytoprightwrapper' to 100%, it won't obey. I tried adding 'overflow: hidden' in all intuitive places in CSS from a stackoverflow solution but that hasn't helped.

Red Circle 3: There is no horizontal spacer between row 2 of boxes and row 3 (e.g between box 4 and 5). This is strange as the same technique did successfully create a spacer between Box 1 and Box 2.

In an attempt to try and resolve Red Circle 2 (Box 3 won't take 100% of its wrapper's height) I created an image almost exactly the right height to force bottom border of box 3 to be in line with bottom border of box 2. This isn't perfect and they don't line up properly so I can't use this for the final, but the result is better:

The newer problems are:

Red Circle 4: Image 3 can never be exact right height as different browsers are rendering different gaps between text (especially on mobile) and so bottom borders of Box 2 & 3 don't line up.

Red Circle 5: For some crazy crazy reason the horizontal gap between Box 4 and 5 is significantly smaller than between Box 1/2 and Box 3. I can't work out why given Box 1, 3, 4 and 5 are all set at 49% width. I tried inserting

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

into the CSS for all the div elements to ensure it wasn't different margins/padding messing this up and this didn't help.

How can I get this to work?

Crucially:

• I need box 3 to extend to exact height of bottom border of box 2 without knowing how many pixels this is (varies between browsers because of differences in rendering horizontal gaps between text).
• I want to be able to add the horizontal space between box 1 and box 2 with 'margin-bottom: 30px' in the CSS (instead of the ridiculous spacer div I've currently created), but because of the box borders this does not work - the margin ends up on the INSIDE of the border instead of the outside!
• I need the vertical spacing between Box 4 and Box 5 to be the same as between Box 1/2 and Box 3.

Please help me with CSS and HTML - I don't know any JS so won't be able to use a solution involving that.

I've spent ages on this and I'd really appreciate your help. My HTML and CSS knowledge is 10 years old and very outdated but I need to put together a website for a new business I'm starting so I've done my best to learn divs and 'html5' vs the good old tables and TR and TDs I used to love, but I've hit a brick wall...

Answer 1

Is this the general idea you have in mind? My Fiddle

I have a few more thoughts, but I just want to see if I have you on the 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;
}