Build Grid with some Boxes only on right Side - How to get it Responsive?

Question

i have a 4-Column Grid. In Second Row 2 Boxes are only on the right Side. See here my Scribble.

What i did till now is that i set here Columns with 25%. No problem here to the 4 Boxes in first Row. The Second i Build this way up: I made a DIV witch a set to 50% and set to Float Right. In this DIV i made 2 other Divs, witch i set again to 50%, but set them to Float Left.

<div class="column_2_4">
<div class="column_2_4">Content of Box</div>
<div class="column_2_4">Content of Box</div>
</div>

My Problem is now. How do i get the right Boxes good responsive? When i Resize Browser the Boxes are getting very small, because they Resize inside the 50% of the Wrapper. But would be better when the Boxes move from right to left and the Resize is same as in the upper 4 Column Boxes.

I can do this only, when setting up the Second Row same as the First Row, but make here the first two DIVs blank. So in this way:

<div class="column_1_4"></div>
<div class="column_1_4"></div>
<div class="column_1_4">Content of the Box</div>
<div class="column_1_4">Content of the Box</div>

Answer 1

Your answer basically becomes more complicated depending on your method of nesting and margin/padding distribution. To achieve this functionality, you must create a 100% viewport within the 50% viewport, keeping in mind that padding and margin add to width on the box level, if that makes much sense:

https://jsfiddle.net/2b0w13rL/

I didn't use your naming conventions, however I can explain. Your scenario comes into play with the following:

.half {
    width: 48%;
}
.full_in_half {
    width: 104.16666666666666666666666666667%; /* (50/48)*100 */
    margin: 0 0 0 -2.0833333333333333333333333333333%;/* (1/48)*100 */
    background: blue;
}
.full_in_half .half {
    width: 46%;
    margin: 0 2%;
}


<div>
    <div class="half right">
        <div class="full_in_half">
            <div class="half"><span></span></div>
            <div class="half"><span></span></div>
            <div class="clear"><!-- --></div>
        </div>
        <div class="clear"><!-- --></div>
    </div>
    <div class="clear"><!-- --></div>
</div>

First, I converted .full_in_half to 100% width, relative to the parent by using a simple calculation (50/48)*100. I use 50 because I'm adding the left+right 1% margins...

From there, all I do is simply strip all margins and apply a negative left margin to bring .full_in_half fully into the viewport (1/48)*100. I must take into account parent's margin-left: 1%. So, my equation is now -((1/48)*100).

All that is fine, however, we still have some odd proportions. That's because the .half children widths and margins need to be updated to suit. We need to get 1% of 100% rather that 50% which is the size of the parent. Simple maths 100/50 = 2. Then margin should be 2%.

With the margin increased, we must decrease the width of the element to avoid overflow issues, thus width: 46%;

I hope this helps you and you should consider adding margin and padding to the child elements of the grid, rather than the grid itself. This practice helps the browser render more optimally and it gives you more control over your application flow.

@todo This isn't yet a 100% viewport created though, but it can be with the use of padding and a change in negative margin. Learning is essential to survival. If you can take what I've shown you and then show me the 100% viewport, I'll feel like I've reached one person in this life.