Dev Shed Forums

**foreverforever** · 05:42 AM

Apologies if this is incredibly basic but it's defeating my brain so I'm asking for help ;

My page is divided up into header, content, and footer.

Header is at the top of the page as you'd expect, content follows, and then the footer, locked to the bottom of the page unless it is pushed down by the content div. All as you'd expect.

Equally unexpectedly, the content div is padded, has rounded corners, and box shadow - indicating that it's where the page's real information is presented.

I want the content div to extend from just below the header to just above the footer even if the content div presents little or no information, and that is where I'm having difficulty.

If I set the content div's position as "absolute", it doesn't push the footer down the page when there is an abundance of content in the content div.

If I set the content div's position as "relative", it only extends down as far as required to present the information, and that could be a really small distance when only a small amount of information is presented, rather than to just above the footer as I'd like.

Could some please tell me what I can do to present the content div as I wish ?

Code for absolute:

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html>



<head>



<style>



/* CSS Document */



@media screen, projection {

 

.BeNiceToMacIE5 {

font-family: "\"}\"";

font-family: inherit;

}



html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

background-color:#224597/*#200772*/;

min-height: 100%;

overflow-y: scroll;

overflow-x: auto;

}



body {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

min-height: 100%;

}



#wrapper, wrapper2 {

    margin: 0;

    padding: 0;

    height: 100%;

    min-height: 100%;

}



html>body, html>body #wrapper, html>body #wrapper2 {

height: auto;

}

 

div#wrapper {

    position: absolute;

    top: 0px;

    width: 96%;

    right:2%;

    left: 2%;

    background-image:url(../images/framework/wrapper01.gif);

    background-repeat:repeat;

    border-left: 1px solid #93A1CC;

    border-right: 1px solid #93A1CC;    

}

 

#header {

    height:154px;

    padding-top:15px;

    padding-right:30px;

    padding-bottom:0;

    padding-left:30px;

    background-color:#6C8CD5;

    position:relative;

}

 

#content01 { /* NB - ABSOLUTE */

    position:absolute;

    top:200px;

    right:30px;

    bottom:110px;

    left:30px;

    padding-top:0;

    padding-right:20px;

    padding-bottom:0;

    padding-left:20px;

    background-color: #ffffff;

    border: 2px solid #93A1CC;

    border-radius:8px;

    -moz-box-shadow: 3px 3px 5px 0px #93A1CC;

    -webkit-box-shadow: 3px 3px 5px 0px #93A1CC;

    box-shadow: 3px 3px 5px 0px #93A1CC;

}

 

.clear {

clear: both;

margin: 0;

padding: 0;

}

 

#footer {

clear: both;

bottom: 0px;

left: 0;

width: 100%;

height: 78px;

background:#6C8CD5/*#A1C4E8*/;

border-top: 1px solid #93A1CC;

color: #fef9ee;

overflow:hidden;

}

#footerContent {padding:10px;}

#footerContent h5 {margin:0; padding:5px 0; color: #fef9ee;}

#footerContent p {padding:5px 0; margin:0;}

 

#main {

margin: 0;

padding: 0;

}

/* \*/

* html #footer {

position: absolute;

}

* html #main {

padding-bottom: 100px;

}

/* \*/

head:first-child+body div#footer {

position: absolute;

z-index:0;

}

head:first-child+body div#main {

padding-bottom: 100px;

}

 

}

 

@media all and (min-width:0px) {

head~body {height:100%;}

}



</style>



</head>

 

<body>



<!-- wrapper begin -->

<div id="wrapper">

        

    <div id="header">

    

        <div id="headercontent">

        HEADER

        </div><!-- id="headercontent" -->

    

    </div><!-- header ends -->

 

    <!-- main begin -->

    <div id="main">

    

        <div id="content01"><!-- content01 begin -->

        

        <p>    

        CONTENT :

        

        <br /><br />

        

        Rellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

        

        </p>

        

        </div><!-- content01 end -->

        

        <!-- clear begin -->

        <div class="clear">

        </div>

        <!-- clear end -->

            

    </div>

    <!-- main end -->

 

    <!-- footer begin-->

    <div id="footer">    

    

        <!-- footerContent begin -->

        <div id="footerContent">

        

            FOOTER

        

        </div>

        <!-- footerContent end -->

                

    </div>

    <!-- footer end -->

 

</div>

<!-- wrapper end -->



</body>



</html>

Code for relative:

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html>



<head>



<style>



/* CSS Document */



@media screen, projection {

 

.BeNiceToMacIE5 {

font-family: "\"}\"";

font-family: inherit;

}



html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

background-color:#224597/*#200772*/;

min-height: 100%;

overflow-y: scroll;

overflow-x: auto;

}



body {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

min-height: 100%;

}



#wrapper, wrapper2 {

    margin: 0;

    padding: 0;

    height: 100%;

    min-height: 100%;

}



html>body, html>body #wrapper, html>body #wrapper2 {

height: auto;

}

 

div#wrapper {

    position: absolute;

    top: 0px;

    width: 96%;

    right:2%;

    left: 2%;

    background-image:url(../images/framework/wrapper01.gif);

    background-repeat:repeat;

    border-left: 1px solid #93A1CC;

    border-right: 1px solid #93A1CC;    

}

 

#header {

    height:154px;

    padding-top:15px;

    padding-right:30px;

    padding-bottom:0;

    padding-left:30px;

    background-color:#6C8CD5;

    position:relative;

}

 

#content01 { /* NB - RELATIVE */

    position:relative;

    top:30px;

    margin-right:30px;

    margin-bottom:40px;

    margin-left:30px;

    padding-top:0;

    padding-right:20px;

    padding-bottom:20px;

    padding-left:20px;

    background-color: #ffffff;

    border: 2px solid #93A1CC;

    border-radius:8px;

    -moz-box-shadow: 3px 3px 5px 0px #93A1CC;

    -webkit-box-shadow: 3px 3px 5px 0px #93A1CC;

    box-shadow: 3px 3px 5px 0px #93A1CC;

}

 

.clear {

clear: both;

margin: 0;

padding: 0;

}

 

#footer {

clear: both;

bottom: 0px;

left: 0;

width: 100%;

height: 78px;

background:#6C8CD5/*#A1C4E8*/;

border-top: 1px solid #93A1CC;

color: #fef9ee;

overflow:hidden;

}

#footerContent {padding:10px;}

#footerContent h5 {margin:0; padding:5px 0; color: #fef9ee;}

#footerContent p {padding:5px 0; margin:0;}

 

#main {

margin: 0;

padding: 0;

}

/* \*/

* html #footer {

position: absolute;

}

* html #main {

padding-bottom: 100px;

}

/* \*/

head:first-child+body div#footer {

position: absolute;

z-index:0;

}

head:first-child+body div#main {

padding-bottom: 100px;

}

 

}

 

@media all and (min-width:0px) {

head~body {height:100%;}

}



</style>



</head>

 

<body>



<!-- wrapper begin -->

<div id="wrapper">

        

    <div id="header">

    

        <div id="headercontent">

        HEADER

        </div><!-- id="headercontent" -->

    

    </div><!-- header ends -->

 

    <!-- main begin -->

    <div id="main">

    

        <div id="content01"><!-- content01 begin -->

        

        <p>    

        CONTENT :

        

        <br /><br />

        

        Rellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

        

        </p>

        

        </div><!-- content01 end -->

        

        <!-- clear begin -->

        <div class="clear">

        </div>

        <!-- clear end -->

            

    </div>

    <!-- main end -->

 

    <!-- footer begin-->

    <div id="footer">    

    

        <!-- footerContent begin -->

        <div id="footerContent">

        

            FOOTER

        

        </div>

        <!-- footerContent end -->

                

    </div>

    <!-- footer end -->

 

</div>

<!-- wrapper end -->



</body>



</html>

**richpri**

I did something similar to what you are trying
to do. The trick that I used was to resize two
of the three fixed divisions whenever the page
size changed.

This is the CSS code:

Code:

html, body {
  margin: 0;
  padding: 0;
}

#topofpage {
  background-color:#ffeedd;
  position:fixed;
  left:0px;
  top:0px;
  height:90px;
  width:100%;
  z-index:5;
}

#leftofpage {
  background-color:#ddffdd;
  position:fixed;
  overflow-y:scroll;
  left:0px;
  top:90px;
  width:135px;
  height:400px;
}

#rightofpage {
  background-color:#ffeedd;
  position:fixed;
  overflow-y:scroll;
  overflow-x:scroll;
  left:135px;
  height:400px;
  top:90px;
}

And this is the js/jquery code:

Code:

/* Function setPage() adjusts the height and width
 * of rightofpage and the height of lefttofpage.
 */
function setPage()
{
  var winH = $(window).height();
  var winW = $(window).width();
  $('#rightofpage').css('height', winH-90);
  $('#rightofpage').css('width', winW-135);
  $('#leftofpage').css('height', winH-90);
}


/* Function resize() waits for 200 ms before
 * executing setPage. Multiple window resize  
 * events that occur within this time peroid 
 * will only trigger the setPage function once.
 */  
$(window).resize(function() 
{
  if(this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() 
  {
    $(this).trigger('resizeEnd');
  }, 200);
});
$(window).bind('resizeEnd', function() {
  setPage();
});

/* Initial page resizing. */
$(function(){
  setPage();  
});

**foreverforever**

Thanks richpri but I don't think that this is what I need. The problem isn't the size of the window but adjusting the content div to best display the content, whether there's a lot of content or very little. Some users of my site will upload a lot of content, whereas others may upload very little, and I want the layout to look good either way.

Or have I missed the point ? Quite possible as I seem to be really stumbling here.

Originally Posted by richpri

I did something similar to what you are trying
to do. The trick that I used was to resize two
of the three fixed divisions whenever the page
size changed.

**richpri**

Lets talk about my setup's content division which sits inside of the rightofpage division.

When there is a lot of stuff in the content division, it scrolls within the rightofpage division which seems to me just a good as scrolling within the browser window. (Better in fact because the header stays in place.)

When there is very little stuff in in the content division, it is smaller but since the background-color is specified for the the rightofpage division the viewer cannot see this. It looks like it still fills the whole screen (except for the header and the sidebar in leftofpage).

I don't use a footer, but you cold put one in a static bottomofpage division and it too would stay on the screen when the content division scrolled. Of course you would have to adjust the formulas in setPage().

If you had a 90px header like I do and added a 40px footer then the winH-90 term would have to be changed to winH-130.

Hope this helps!

**foreverforever**

Hi richpri,

Isn't that essentially the same as setting overflow-y to scroll in my content div in the "absolute" example ?

I appreciate that you want your header to stay in place, but I want the whole page to scroll rather than just the content div.

If needs be, I could go down the scrolling overflow-y road but it wouldn't be my ideal solution. Any other ideas ?

**richpri**

Sorry, nothing else occurs to me.

**foreverforever**

OK, well thanks all the same - hopefully someone else will come up with what I need.

Originally Posted by richpri

Sorry, nothing else occurs to me.

**Kravvitz**

foreverforever, there is no good way to do what you're trying to do. You could try using "display:table" (for #wrapper), "display:table-row" (for #header, #main, #footer), and "display:table-cell" (for #headercontent, #content01, #footerContent). Since you already have separate wrapper <div>s for the header and footer, you may not need to add any additional markup.

Out of curiosity, is there a particular reason why your code has IE5/Mac hacks in it? When was the last time you tested in IE5/Mac?

Originally Posted by richpri

(Better in fact because the header stays in place.)

And worse because when someone scrolls via the page up/down keys or by clicking in the scrollbar's gutter, the page will scroll by the viewport's height but the top of that will be covered by the fixed-positioned header.

**foreverforever**

Originally Posted by Kravvitz

foreverforever, there is no good way to do what you're trying to do.

It may not be perfect but I have what seems to be a working solution :

This is what I've done :

1 - Set the content div (#content01) as position:relative;

2 - Added a one-cell table within the content div, and given it a class of "contentbox".

Code:

<table class="contentbox"><tr><td valign="top">
CONTENT :
		
<br /><br />
				
Rellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, 
ultricies eget, tempor sit amet, ante. 
		
</td></tr></table>

3 - Shifted some css from "content01" to "contentbox", so it now looks like this -

Code:

#content01 { /* NB - RELATIVE */
	position:relative;
	top:30px;
	margin-right:30px;
	margin-bottom:40px;
	margin-left:30px;
}
 
.contentbox {
	width:100%;
	height:300px;
	padding-top:20px;
	padding-right:20px;
	padding-bottom:20px;
	padding-left:20px;
	background-color: #ffffff;
	border: 2px solid #93A1CC;
	border-radius:8px;
	-moz-box-shadow: 3px 3px 5px 0px #93A1CC;
	-webkit-box-shadow: 3px 3px 5px 0px #93A1CC;
	box-shadow: 3px 3px 5px 0px #93A1CC;
}

4 - Moved all content into the table.

5 - Modified richpri's jQuery code to adjust all elements with a class of "contentbox" - ie the new table.

Code:

$('.contentbox').css('height', winH-320);

I appreciate that using a table in this way does run slightly counter to the concept of css but it seems to work. Would appreciate hearing if there's any reason why I shouldn't do it this way.

Originally Posted by Kravvitz

Out of curiosity, is there a particular reason why your code has IE5/Mac hacks in it? When was the last time you tested in IE5/Mac?

To be honest, it's a template that I found on the web - I don't actually understand the IE5/Mac hacks - once I have a better grip of design, I hope to tidy it up.

Dev Shed Forums

Thread: Setting a minimum height for a div

Setting a minimum height for a div

Comments on this post