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
Lee Cockcroft
5,147 PointsCSS min-height
Hi All, Very confused here.
My understanding of max-height and min height is the obvious, maximum height of a container, and the minimum.
However, my code below, I have set the nav bar to 30px min-height, which sits perfect, if i delete this and set a max-height, to whatever value it doesn't work? I've then set just height to 30px (same as min-height) but the height is a lot less.
So if the minimum height is 30px why doesnt this expand with padding etc?
Also why am I unable to remove min-height and set a maximum height?.
This is new to me i usually like to set a maximum height of containers so i can have my page layout all set.
Thanks Lee
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> test </title>
<link rel="stylesheet" type="text/css" href="lcfc.css">
</head>
<body>
<nav>
<ul class="navigation">
<li class="left">Name </li>
<div class="move">
<li class="right"> Home</li>
<li class="right"> Experience</li>
</div>
</ul>
</nav>
</body>
</html>
/* Global Layout Set-up */
*
{
box-sizing: border-box;
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0;
text-align: center;
font-family: 'Roboto',
sans-serif;
color: #222;
background: #f7f5f0;
}
nav
{
min-height:30px;
background:black;
width:100%;
margin:0;
padding:10px;
font-weight: 700;
}
.navigation li{
color:white;
list-style:none;
display:inline;
}
.left
{
float:left;
margin-left:175px;
padding:5px;
}
.move
{
margin-right:20%;
}
.right
{
float:right;
padding:5px;
padding:5px;
margin-left:5px;
}
Moderator edited: markdown was added to the question to properly render the code. Please see the Markdown Cheatsheet link at the bottom of the "Add an Answer" section for tips on how to post code to the Community.
4 Answers
Steven Parker
243,318 Points
Your global settings include padding in the dimension calculations.
I've then set just height to 30px (same as min-height) but the height is a lot less.
As long as the contents would normally be less than 30px (which they seem to be here), setting either height or min-height should produce the same effect. I tried it myself and noticed no difference.
So if the minimum height is 30px why doesnt this expand with padding etc?
One of your global property settings is box-sizing: border-box;, which causes borders and padding to be included in dimension calculations. With this setting, added padding will not increase the size of the element, but will instead reduce the space allocated for the content. This excellent interactive box-model demo can be very useful for experimenting with various settings to become familiar with the difference between content-box and border-box.
Also why am I unable to remove min-height and set a maximum height?.
Setting a max-height will not have any effect on the height other than to reduce it, and only if it would otherwise be larger than the value you specify. You should also be aware that by applying float properties to the interior elements, they are removed from the normal document flow and do not contribute to the default height of the nav element. So either an explicit height/min-height or a clearfix is required to insure adequate space in the bar to display the contents.
Lee Cockcroft
5,147 PointsThank you so much for your reply, that has really helped.
I may be jumping the gun, and will learn more as I continue the course, however, just out of interest may I ask what you usually do when setting a layout?
When I began css I used to lay all the containers out with a max-height, max -width, including box-sizing so I have I base line.
However, as I learn new techniques, this doesn't appear as simple, which then seems to set me back ten steps.
Thanks again
Lee
Steven Parker
243,318 PointsThe focus in modern layouts is generally more in making layouts responsive, particularly to various display media sizes. So the popular techniques don't tend to use rigid limits very often.
Some courses you might enjoy (if you haven't done them yet) are Responsive Layouts and CSS Layout Techinques.
Lee Cockcroft
5,147 PointsMany thanks. You've been a great help