CODEWITHSUNDEEP
htmlcss
Gamer
Gamer

Reputation: 311

How to create the border height of a child div as same as the parent div?

I have a child div with some padding. But when I apply border-right on the child div, then how can I get it in full height? Here's the code:

<div class="parent">
  <div class="child">
    <h2>Content</h2>
  </div>
</div>

.parent{
  border: 2px solid black;
}
.child{
  width: 25%;
  border-right: 2px solid red;
}

The output of my current code: enter image description here

What I actually want: enter image description here

I am newbie, it will be a great help. Thanks

Upvotes: 0

Views: 1633

Answers (3)

frnt
frnt

Reputation: 8795

Removing default margin of <h1> element and then using padding you can align the text to center on parent div and set height:100% to child div, as below,

.parent{
  border: 2px solid black;
  height:40px;
}
.child{
  width: 25%;
  height:100%;
  border-right: 2px solid red;
}
h2{
  margin:0;
  padding-top:8px;
}
<div class="parent">
  <div class="child">
    <h2>Content</h2>
  </div>
</div>

Upvotes: 2

skobaljic
skobaljic

Reputation: 9634

Your problem is that h2 tag gets default top and bottom margins from the browser. You can either set those to zero (example here):

h2 { margin: 0 }

Or, if you want to keep them, than set the child's container overflow to hidden:

.child {overflow: hidden;}

Example below:

.parent {
    border: 2px solid black;
}

.child {
    width: 25%;
    overflow: hidden;
    border-right: 2px solid red;
}
<div class="parent">
    <div class="child">
        <h2>Content</h2>
    </div>
</div>

And on JSFiddle.

Upvotes: 2

Sivanjah
Sivanjah

Reputation: 9

You should inherit the parent's maximum height. Try adding this into your.child ,

.child{
 max-height:parent;
}

Upvotes: 0

Related Questions