CODEWITHSUNDEEP
css
kirby
kirby

Reputation: 4041

CSS min height not working

I have a large div that I want to put content in. I want the div to be padded and have a minimum height so that if there is too much text in the div it expands down to maintain the padding. But I also don't want it to get less than 100px in height. Currently, when I run this code, some of the text falls outside of the div.

HTML:

<div id='content'>
    <div>lots of text in here</div>
</div>

CSS: 

#content {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid gray;
    min-height: 100px;
    width: 800px;
    padding: 60px;
}

Upvotes: 5

Views: 11891

Answers (2)

fitojb
fitojb

Reputation: 279

Well, try to use paragraphs in your HTML, instead of duplicating divs. It does not work because the duplicate div is not styled in your CSS.

<div id='content'>
    <p>lots of text in here</p>
</div>

If this solves your problem, feel free to accept this answer.

Upvotes: 3

Valentin Kantor
Valentin Kantor

Reputation: 1844

You can add height:auto; to your css, it may help.

Upvotes: 0

Related Questions