CODEWITHSUNDEEP
htmlcss
4 Leave Cover
4 Leave Cover

Reputation: 1276

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

Upvotes: 2

Views: 1901

Answers (4)

Yash Jain
Yash Jain

Reputation: 1

This would take a bit of "resizing" of your elements on hover. Take a look at this code snippet.

* {
  box-sizing: border-box;
}
.parent-div {
  display: flex;
  height: 200px;
  border: 1px solid black;
  background: black;
}
.box1,
.box2 {
  width: 100%;
  border: 3px solid lightblue;
  transition: all 0.3s ease-in;
  background: white;
  margin: 5px;
}
.box1:hover,
.box2:hover {
  margin-top: 100px;
}
<div class="parent-div">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Here is an alternative I consider which looks "cooler".

* {
  box-sizing: border-box;
}
.parent-div {
  display: flex;
  height: 200px;
  border: 1px solid black;
  background: #b3ccff;
}
.box1,
.box2 {
  width: 100%;
  border: 3px solid lightblue;
  transition: all 0.3s ease-in;
  background: #00cc66;
  margin: 5px;
}
.box1:hover,
.box2:hover {
  margin-top: 100px;
}
<div class="parent-div">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122125

First you can use Flexbox on parent element and then you just need to set box-sizing: border-box and change padding-top on parent element.

* {
  box-sizing: border-box;
}
.content {
  display: flex;
  height: 200px;
  border: 1px solid black;
  transition: all 0.3s ease-in;
}
.left,
.right {
  flex: 1;
  border: 3px solid lightblue;
  margin: 5px;
}
.content:hover {
  padding-top: 50px;
}
<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>

You can also change margin-top on child elements 

* {
  box-sizing: border-box;
}
.content {
  display: flex;
  height: 200px;
  border: 1px solid black;
  background: black;
}
.left,
.right {
  flex: 1;
  border: 3px solid lightblue;
  transition: all 0.3s ease-in;
  background: white;
  margin: 5px;
}
.left:hover,
.right:hover {
  margin-top: 50px;
}
<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>

Upvotes: 2

mrfour
mrfour

Reputation: 1268

The key point is using border-box and set padding-top to the parent element.

HTML

<div class="black">
  <div class="red"></div><div class="blue"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

.black {
  padding-top: 100px;
  width: 300px;
  height: 300px;
  background-color: black;
}

.red, .blue {
  display: inline-block;
  width: 50%;
  height: 100%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

Upvotes: 2

KCarnaille
KCarnaille

Reputation: 1057

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.

Upvotes: 2

Related Questions