Question

My site currently has this general layout for all pages:

<?php
include "head.php";
?>
<title></title>
<?php
include "top.php";
?>
<div class="mainbody">
</div>
<?php
include "bottom.php";
?>

head.php includes the html and head stuff (ie, the topmost things on a page), top.php includes the site logo and the horizontal navbar, bottom.php includes the footer and closing html/body tags, and the mainbody class contains the content for the specific page.

Now my problem is on one specific page. On every page, there is enough content for the page to be large enough that it needs to be scrollable, and the mainbody div expands to accommodate that. The issue with one of my pages is that there is too little content, or rather, most of the content is floated, so the div doesn’t expand as it normally does. I thought I could fix it by adding a min-height to the CSS, but this doesn’t work. The CSS currently looks like this:

.mainbody {
background-image: url("Images/Background.png");
border-radius: 5px;
-moz-border-radius: 5px;
padding: 0.7%;
position: relative;
width: 68%;
min-height: 80%;
min-width: 768px;
margin: 0px auto;
}

Every single line works, except for min-height. I cannot get it to work.

Answer 1

Put the value of min-height in pixels

min-height: 400px;

Here is a fiddle to show you

FIDDLE

Addition

To do this pure css you need to add some css to the body like so

 body {position:absolute; height:100%; width:100%; overflow:visible; }
 #content { background-color:#cccccc; min-height:80%; }

FIDDLE