CODEWITHSUNDEEP
htmlcssheight
Ale
Ale

Reputation: 45

Content overflowing: auto height to tall for header div

I currently got a problem with content that is overflowing the header of my html. I tried using the css-property overflow, but setting it to hidden or auto is not what I am trying to achieve. I don't want the overflowing content to be hidden, I want the height of my content fitting to the fixed hight of my header.

May anyone help?

Here is some sample code with the problem:

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  height: 120px;
  border-bottom: 3px solid gray;
}
<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
        <p>Some Properties I have to display which are overflowing.</p>
</div>

Upvotes: 0

Views: 414

Answers (2)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

You can apply margin property to 

h1,h3,p{
margin:5px 0px;}

for content set in fixed height

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  height: 120px;
  border-bottom: 3px solid gray;
}

h1,h3,p{
margin:5px 0px;}
<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
        <p>Some Properties I have to display which are overflowing.</p>
</div>

Upvotes: 1

Kaddath
Kaddath

Reputation: 6151

If you set a fixed height to your header and elements don't fit in it, it's normal that they overlap with the bottom border. You need either to change height to min-height, either to place those elements out of you fixed height div:

With min-height: 

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  min-height: 120px;
  border-bottom: 3px solid gray;
}
<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
        <p>Some Properties I have to display which are overflowing.</p>
</div>

Or outside the div: 

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  min-height: 120px;
  border-bottom: 3px solid gray;
}
<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
</div>
<p>Some Properties I have to display which are overflowing.</p>

Upvotes: 0

Related Questions