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

Posted by Lee Cockcroft
Lee Cockcroft
5,147 Points

max-height

Hi

could someone explain why this is happening please

Online it tells me max-height will override height! however on the header the height is overirding max-height?

I have stated the height as 5% and max-height 10%

confused

thanks

<div id="wrapper"> <header> <h2> headerName </h2> <h2> headerName </h2>

</header>

<nav><h2> navName </h2> <h2> navName </h2>

</nav>

</div>

CSS

wrapper

{ width:75%; height:1000px; background-color:blue; margin:auto;

}

header { height:5%; max-height:10%; background-color:pink;

}

2 Answers

Anton Williams
Anton Williams
5,157 Points

Yes max-height and min-height (as well as max and min-width) can overwrite the original width and height.

But they are different to width and height as they are more like a rule for the element. In your case the header has a max-height of 10%, this means the header cannot be greater than 10% in height, but the height is only 5%, therefore it will stay at that height.

If you had used min-height then the minimum height of the header would be 10% which would overwrite the original height.

min-height/min-width: the element must be at least this width/height. max-height/max-width: the element cannot be any larger than this width/height.

Lee Cockcroft
Lee Cockcroft
5,147 Points
Lee Cockcroft
Lee Cockcroft
5,147 Points

Thank you for your help :)