i have inside the body main ‘container’ div and inside this ‘container’ div there are three divs which are ,’header’, ‘content’ and ‘footer’ my question is, i want the ‘content’ div to expand vertically with content increasing dynamically and by that the ‘footer’ will be pushed down when ‘content’ div is expanding. and all of this is done inside the main ‘container’ div so it also expand vertically!?
HTML
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS
body
{
background-color:Gray;
}
#container
{
border: dotted;
}
#content
{
border:dotted;
}
#header
{
border:dotted;
}
#footer
{
border:dotted;
}
You could use the CSS attribute
min-heightfor this purpose, but you’ll have to consider that it won’t be support in all (legacy) browsers.Here’s an example: http://jsfiddle.net/YS9XV/1/