Change your css for .header_container h2 like below and it should work.
.header_container h2 {
margin: 0;
}
Solution 1 :
Solution 2 :
It is happening because you are using position absolute for the h2 heading.]
.header_container h2 {
/* position: absolute;
bottom: 0;
padding: 0;
*/
margin: 0;
}
What position absolute does that it makes the element like a ghost and it is not able to take any space in the HTML flow. If you want to use absolute position use it on the parent that is on <div class="two">Two</div>
If you find the answer helpful then please accept it. It lets others know that it is the correct answer.
Problem :
I am using css grid in my demo application.My application is working fine when I have small heading or small title (h2).
but when The title is big my application works behave buggy or not as expected output .
here is my code
https://codepen.io/naveen-1234/pen/zYzKqQW
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 40px);
}
.one {
grid-column: 2/5;
grid-row: 2/5;
background-color: #ee0
}
.two {
grid-column: 4/8;
grid-row: 3/8;
background-color: #eee;
padding: 20px;
border: 1px solid #000
}
.header_container {
position: relative;
border: 1px solid #000;
min-height: 50px
}
.header_container h2 {
position: absolute;
bottom: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">one</div>
<div class="two">Two
<div class="header_container">
<h2>Lorem ipsum dolor sit amet</h2>
</div>
</div>
</div>
</body>
</html>
First case (which is working fine) when tile is small
Case two when Title is big.it show like this which is wrong. It overlap the Two text and not increase the container.
Expected output.
- When Title text increase both black border container increase in upward direction .Inner black border and outer black border grows in upward direction.
- It will not overlap the text (TWO)
Expected output screenhot
Comments
Comment posted by user5711656
it is increasing div height in downward direction …I want it should increase in upword direction
Comment posted by Ashish Narnoli
Can you post the expected result screen-shot?
Comment posted by user5711656
attached expected screen shot..I am not able preble this solution
Comment posted by user5711656
please delete your answer not helpful .. after this it grow in downward direction
Comment posted by Arun Bohra
Can you explain ur question and also expected output a little better because if you want it to go upwards then it will surely overlap with the text two. U can use the image of the output.
Comment posted by user5711656
see the attached image as a expected output