Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Display Modes Table Display

santos mena
santos mena
868 Points
Posted by santos mena
santos mena
868 Points

min-height value for the parent element doesn't work locally - height does works perfect.

Hello, I tried the min-height value for the parent element (.main-nav) but it didn't worked locally, but if I change property to "height" it does works perfect. Is it because doc is not online?

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

'min-height' will work the same locally and 'online'. What browser and version are you using? Some older browsers don't support it.

6 Answers

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Ah, your using 'display:table'. In tables, 'height' is the same as 'min-height'. 'min-height' is not really supported in tables, 'height' will scale based on content so they're essentially the same.

Lidija Novakovic
Lidija Novakovic
6,634 Points
Lidija Novakovic
Lidija Novakovic
6,634 Points

Had the same problems and wondered where I did go wrong - min-height is not supported for tables and FF will not display it. http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Thumbs up

santos mena
santos mena
868 Points
santos mena
santos mena
868 Points

Hello Damien, I'm using FF v. 35.0.1 running on Yosemite v. 10.10.2. By the way after your reply I checked other browsers ans Safari/Chrome don't have this issue ... Got to be something with FF I guess.

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Hey Santos, That is weird, I just updated FF to v35 and rand the little script below, it works as expected. It must be a combination of factors in your existing code. I can help if you post what you have.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #leftColumn {
            width:200px;
            min-height:300px; 
            border:1px solid green;
        };
    </style>
</head>
<body>
    <div id="leftColumn">Left column</div>
</body>
</html>
santos mena
santos mena
868 Points
santos mena
santos mena
868 Points

Yeah It is weird ... Your code works perfectly fine and mine too but if I remove the display property (table). 

           .main-header {
    padding: 20px;
    min-height:300px; 
    display: table;  /* removing this makes it work */ 
    width: 100%;
    }
santos mena
santos mena
868 Points
santos mena
santos mena
868 Points

Great! That's the answer that explains everything. Now is clear - thanks!