CODEWITHSUNDEEP
htmlcss
Chittolina
Chittolina

Reputation: 235

Fit a div between two divs

My HTML:

<div id="header">some content</div>
<div id="navbar">some items</div>
<div id="container">some items</div>
<div id="footer">some items</div>

My CSS:

*{padding: 0; margin: 0;}
#header{width: 100%; height: 15%; background-color: red;}
#navbar{width: 100%; height: 10%; background-color: yellow;}
#container{width: 70%; height: 65%; background-color: gray;}
#footer{width: 100%; height: 10%; background-color: green;}

My problem is that if I put too much content on the container it will overflow the space and it's gonna be put on the footer div. How can I fix it?

Upvotes: 0

Views: 1279

Answers (1)

Metroidaron
Metroidaron

Reputation: 357

The easiest solution is to do as the comments to your post are saying and make your content overflow scroll, instead of just getting bigger and bigger, thus overlapping your footer. To do this is pretty easy...

In your CSS, modify the container to be as follows, this should prevent overlapping issues.

#container{
    width: 70%;
    height: 65%;
    max-height: 65%;
    overflow:scroll;
    background-color: gray;
}

Logically the above code should work, fellow Stack Overflow Citizens please correct any mistakes I made as I did not test this explicitly.... what you are telling the browser to do here is, Container, your not allowed to go over 65% height, if you do, your overflow will scroll, rather than your height just keep growing...

Upvotes: 2

Related Questions