4 Leave Cover 4 Leave Cover - 3 months ago 16
CSS Question

div resize without pushing content

I want to add 100px gap between the top of black box for both red and blue box.
At the same time I do not want to push both boxes (red and blue) to the bottom of the page. I tried using padding and margin for both boxes but it will push them downwards. How do I 'squeeze' the contents of both red and blue box without have to push them downwards? Is it okay to group both of them into 1 div then use CSS on that div? If so how to do it?

enter image description here

Answer

You can try someting like :

.black-box{
  padding-top: 100px;
}

And for your red/blue divs :

.red, .blue {
   height: calc(100% - 100px);
}

But it depends on your current code. And it can works if you have absolute position for both colored divs, or display: inline-block.