CODEWITHSUNDEEP
htmlcss
Krish Gowda
Krish Gowda

Reputation: 193

why min-height is not working?

hi part of my html code is something like this

<div id="container">
<div id="content">
    <div></div>
    <div></div>
    <div></div>
</div>
</div>

In CSS i have

#content
{

    min-height:600px;
}

But i am expecting this div with id=content to extend height which is not happening. How to fix this?

for a complete code you can check at this jsfiddle link http://jsfiddle.net/eYMz3/

Upvotes: 0

Views: 129

Answers (4)

Smern
Smern

Reputation: 19066

You need to set overflow:hidden on the #content

http://jsfiddle.net/eYMz3/3/

The problem was that the elements you want to stretch #content were uncleared floats. These don't stretch their parent.

If you use anything other than overflow: visible (default behavior), it will use block formatting context which will basically clear the floats.

w3 Documentation

You could also have added <div style="clear:both;"></div> just before the end of your #content div to clear your floats.

Upvotes: 2

tommypyatt
tommypyatt

Reputation: 528

I think the problem here is that all of the elements inside #content have also float: left applied. The result of this is that the element itself will not respond to the heights of elements inside it. In this instance, min-height and height will do the same thing, and the height of #content will not extend.

Other than that, everything seems to be working as one would expect in the document you provided. I might've misunderstood your question, but I am unable to add a comment asking for clarification because it tells me I don't have enough points.

Upvotes: 2

Nick R
Nick R

Reputation: 7784

The problem here, is that you're using floats, but never clearing them, meaning the parent element doesn't know the height to extend to.

To fix this:

You can use the micro clearfix hack from http://nicolasgallagher.com/micro-clearfix-hack/

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Then add the class to <div id="content">, so it becomes <div id="content" class="cf">

JSFiddle Demo

You can read up on floats here - under the section "The great collapse" - http://css-tricks.com/all-about-floats/

Upvotes: 2

SaturnsEye
SaturnsEye

Reputation: 6499

Change your code to:

<div id="container">
<div id="content">
    <div></div>
    <div></div>
    <div></div>
</div>
</div>

That should do it, as "container" on it's own isn't valid

Upvotes: 3

Related Questions