salivan salivan - 6 months ago 16
Javascript Question

making stacked responsive blocks that change height and width on resize

I would like to create 3 block layout that looks like this:

_________
| | |
| |___|
| | |
---------


width is % based. So is padding-bottom, to make box responsive both height and width.

css looks like this:

#block-home header {
position: relative;
padding-bottom: 60%;
width: 60%;
float: left;
background-color: green;
}
#block-home footer {
position: relative;
padding-bottom: 32%;
width: 40%;
float: right;
background-color: red;
}
#block-home aside {
position: relative;
padding-bottom: 23%;
width: 40%;
float: right;
clear: right;
background-color: blue;
}


My problem is that bottom border of 1 and 3rd blocks are never aligned. By changing width of browser, they get misaligned.

What is a possible solution here?

jsfiddle

Answer

The problem you are facing is that padding-bottom is calculated according to the width of the element so. You will need to use the height property.

See here :

Percentages refer to the width of the containing block

To achieve your layout, you can use position:absolute; either on the right blocks or on the left one so they/it adapt to the height of the other block.

Here is a FIDDLE with the 2 right blocks set to position: absolute;

CSS code :

#block-home{
    position:relative;
}

#block-home header {
    position: relative;
    padding-bottom: 60%;
    width: 60%;
    background-color: green;
}
#block-home footer {
    position: absolute;
    top:0;
    left:60%;
    height:70%;
    width: 40%;
    background-color: red;
}
#block-home aside {
    position: absolute;
    top:70%;
    left:60%;
    height:30%;
    width: 40%;
    background-color: blue;
}