CSS Dimensions
When creating CSS layouts it’s important to keep in mind how CSS Dimensions work.
There are 6 different dimension declarations:
- height
- max-height
- min-height
- width
- max-width
- min-width
Height and width state the height and width of an element. Not all elements can have specific widths or heights defined, and some will shrink depending on the size of their content. You can usually avoid this by using display:block;. We’ll be using a default block displayed element, a div.
Max-height and max-width specifies the maximum dimensions of the given element, not allowing it to go any larger. If, however, the content is larger that the maximum most browser will increase the dimensions over your declarations. You can use overflow declarations to try and over come this.
Min-height and min-widths are very useful when creating columned layouts. Let’s imagine you have a web page with two columns, one for your navigation, and one for your content, with a footer div at the bottom. Sometimes your content will only be one line long, meaning that the footer will become part of the content pane (assuming you haven’t cleared floats). You can force the content div to be a specific height, unless the content forces it to be larger.
.content { min-height: 300px; }
