Hello, I am attempting to center a div within my body. The div has a minimum height of 400px, but its size can expand based on the content it holds. When I add more content to the div, it grows accordingly, but it ends up touching the bottom of the div.
I would like to create a minimum amount of space between the div and the bottom of the page, so that even as the div expands, there is always some space retained between the body and the div.
Here is a snippet of my HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TODO-List</title>
<link rel="stylesheet" href="StyleSheet.css">
</head>
<body>
<div class="container">
<!-- Content goes here -->
</div>
</body>
</html>
And this is my CSS:
.container
{
/* Display properties */
margin: 0px;
padding: 0px;
min-height: 400px;
width: 40%;
/* Border styles */
border: 2px solid Grey;
border-radius: 5px;
box-shadow: 0px 0px 2px 2px Grey;
-moz-box-shadow: 0px 0px 2px 2px Grey;
-webkit-box-shadow: 0px 0px 2px 2px Grey;
/* Positioning */
position: absolute;
left: 30%;
top: 270px;
}
If you'd like to view the code in action, check out this jsFiddle link.