CODEWITHSUNDEEP
htmlcss
Mystic Hayato
Mystic Hayato

Reputation: 91

Auto adjust the height of container based on content

Every time i put a huge content details, such as text it goes out of my container.How can i make the container height auto adjustable based on content;.

   #container {
    background-color: #262626;
    width: 1000px;
    min-height: 200px;
    margin: 0 auto;
    margin-top: 40px;
    padding-top: 20px;
   -webkit-border-top-left-radius: 30px;
   -webkit-border-top-right-radius: 30px;
   -moz-border-radius-topleft: 30px;
   -moz-border-radius-topright: 30px;
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
}

    #main {
    position: relative;
    top: 116px;
    width: 980px;
    height: 700px;
    float: left;
    background-color: #262626;
    padding: 10px 10px;
    margin-bottom: 40px;
    background: -webkit-linear-gradient(#262626,#101010); /* For Safari */
    background: -o-linear-gradient(#262626,#101010); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#262626,#101010); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#262626,#101010); /* Standard syntax */
    -webkit-box-shadow: 0 10px 6px -6px black;
    -moz-box-shadow: 0 10px 6px -6px black;
    box-shadow: 0 10px 6px -6px black;
    -webkit-border-bottom-right-radius: 30px;
    -webkit-border-bottom-left-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

Upvotes: 1

Views: 3964

Answers (4)

jbutler483
jbutler483

Reputation: 24559

In your #Main css you've set your height to 700px.

Change this to

height:auto;

and it will work fine. But since this is the default value anyway, you could also remove this height declaration completely, instead.

Live Demo

Or, if you wanted to have a minimum height of 700px, say;

min-height:700px;

Of course, there are many other 'versions' of height you can set. Including (but not limited to):

  • min-height

The min-height CSS property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

  • max-height

The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

  • line height

On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.

All of which can be used to set you elements in a way you want

Here's a Reference link for you.

MDN summary of the height property

Upvotes: 2

FelipeAls
FelipeAls

Reputation: 22171

Don't set any height in your CSS except if needed.
Default value of the property height is auto so you don't have to set it explicitly and as stated by previous answer of Ibtehaz, it'll adjust to content.

  • If you've to set an height, by example because there's a tall background that would be cropped when there isn't enough content in a particular page, prefer the property min-height.
  • line-height is useful in cases like inline-block and a few others.
  • With HTML tables displaying tabular data and elements displayed in CSS with a table layout algorithm (display: table-cell and such), height has the same effect as min-height in the general case.
  • As a last resort, height can be useful, for example with elements containing an image of set dimensions.

Upvotes: 0

Bardo
Bardo

Reputation: 2523

I think the problem here is that your container is inside #main.

As #main has a height of 700px, each time you get a content that is bigger than 700px, your #container is maxed and your content gets outside your main div.

To fix this just change the height of #main from height:700px to min-height:700px

Upvotes: -1

user2161228
user2161228

Reputation:

Use height: auto in your CSS. It will automatically adjust your height as your text gets bigger or smaller.

Upvotes: 0

Related Questions