Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Footer DIV lost - need at bottom

Status
Not open for further replies.
TimeTraveler

TimeTraveler

IS-IT--Management
Nov 20, 2001
99
0
0
US
I'm having problems keeping the footer at the absolute bottom of the page (not just the Window). Boss wants to rollback to tables and or frames, and I'm looking to prevent that if possible.

Criteria:
1. Content section must always be to right of menu section, regardless of window size
2. Footer must remain below both menu and content
3. Only outer window scrollbar present, no scrolling within a div

What I've tried so far:
1. Searched this forum and did not find any solution
2. Searched W3C and did not get anywhere their, either
3. Tried various combinations of display, float, position:absolute and have not come up with a configuration that will perform as expected
4. Originally tried the div01 thru div04 classes by themselves, then put just 02 and 03 (menu and content) in a container, then tried 01 thrue 03 in a container (header, menu and content) and still the Footer does not want to hang out as the very bottom

Basic shape below:
[tt]
+-----------------------------+
|header |
+---------+-------------------+
|Menu +Content +
| + +
+---------+-------------------+
|footer |
+---------+-------------------+
[/tt]


Here's the code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>CSS 4-Section Layout</title>
	<style type="text/css">
		body	{
			margin: 0px 0px 0px 0px;
			border: 0px
			padding: 0px 0px 0px 0px;
			font-family: Arial, Helvetica, Sans-serif;
			background: cyan;
		}
		div {
			margin: 0px 0px 0px 0px;
			border: 0px
			padding: 0px 0px 0px 0px;
		}
		.containerClass {
			margin: 0px 0px 0px 0px;
			border: 0px
			padding: 0px 0px 0px 0px;
			background: yellow;
			display: block;
			clear: all;
		}
		.div01Class {
			height: 80px;
			min-width: 400px;
			margin: 0px 0px 0px 0px;
			border: 0px;
			padding: 0px 0px 0px 0px;
			background: #AAA;
		}
		.div02Class {
			position: absolute;
			top: 80px;
			left: 0px;
			width: 200px;
			margin: 0px 0px 0px 0px;
			border: 0px;
			padding: 0px 0px 0px 0px;
			background: lightgreen;
			/*
			display: inline;
			float: left;
			*/
		}
		.div03Class {
			position: absolute;
			top: 80px;
			left: 200px;
			margin: 0px 0px 0px 0px;
			border: 0px;
			padding: 0px 0px 0px 0px;
			background: #EEE;
			/*
			float: left;
			display: inline;
			*/
		}
		.div04Class {
			clear: both;
			margin: 0px 0px 0px 0px;
			border: 0px;
			padding: 0px 0px 0px 0px;
			background: orange;
		}
	</style>
	<script type="text/javascript">
		var rows=100;
		var cols=10;
	</script>
</head>
<body>
	<div class="containerClass">
		<div class="div01Class">
			<h2>Header</h2>
		</div>
		<div class="div02Class">
			<h2>Menu</h2>
			<ul>
				<li>List Item</li>
				<li>List Item</li>
				<li>List Item</li>
				<li>List Item</li>
				<li>List Item</li>
				<li>List Item</li>
			</ul>
		</div><!-- div02Class -->
		<div class="div03Class">
			<h2>Content</h2>
			<TABLE>
				<CAPTION>
					Table
				</CAPTION>
				<TR>
					<TH>
						Count
					</TH>
					<SCRIPT type="text/javascript">
						for(colCnt=1;colCnt<=cols;colCnt=colCnt+1){
							document.writeln("<TH nowrap>Column " + colCnt + "<\/TH>");
					}
					</script>
				</TR>
				<SCRIPT type="text/javascript">
					var rnd = 0;
					for(rowCnt=1;rowCnt<=rows;rowCnt=rowCnt+1){
						document.writeln("<TR>");
						document.writeln("<TD>" + rowCnt + "<\/TD>");
						for(colCnt=1;colCnt<=cols;colCnt=colCnt+1){
							rnd = Math.random();
							rnd = Math.round(rnd * 100);
							document.writeln("<TD>" + rnd + "<\/TD>");
						}
						document.writeln("<\/TR>");
					}
				</script>
			</TABLE>
		</div>
	</div><div class="div04Class">
		<h2>Footer</h2>
	</div>
</body>
</html>

Thanks in advance for any help or comments.

-S
 
Sort by date Sort by votes

Thanks for the quick reply, traingamer. Unfortunately, the solution described in that link did not work for my layout and only seems to work for a single-column layout like:

[tt]
+--------------------+
|content |
| |
| |
+--------------------+
|footer |
+--------------------+
[/tt]

Sean
 
Upvote 0 Downvote
Put your header, menu and content inside the container.
Code: 
<body>
<div id="container">
[b]<div class="div01Class">
      <h2>Header</h2>
   </div>
        <div class="div02Class">
            <h2>Menu</h2>
            <ul>
                <li>List Item</li>
            </ul>
        </div><!-- div02Class -->
        <div class="div03Class">
            <h2>Content</h2>
...the rest of your content...
        </div>
<div id="footer">
<p>&copy; Dave Woods</p>
</div>
[/b]
</div> 
</body>
</html>
css
Code: 
.div02Class { width: 29%;
float: left;}
.div03Class { width: 65%;
float: left; }
(Instead of percentage width, you could use fixed width.) Just make sure that margins and padding don't push the width of the two columns past the width of the container. And make sure you have clear: both on the footer div.




Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
I cobbled this together rather quickly.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd"><html>[/URL]
<head><title></title>
<style type="text/css">
html,body {
    margin: 0px;
height:100%;
}

#header{
width:100%;
height:20%;
border:0px;
background-color:#AAAAAA;
font-size:18px;
}

#middlesection{
width:100%;
background-color:#00AAAA;
}

#navmenu{
float:left;
width:20%;
height:100%;
}

#content{
float:left;
width:70%;
min-height:100%;
padding-left:5%;
padding-right:5%;
text-align:justify;
color:#FFFFFF;
font-family:Arial;
background-color:#2255AA

}

#clearing{
clear:both;
}

#footer{
height:20%;
background-color:#AAAA00;

}
</style>
</head>
<body>
<div id="header">Header stuff goes here</div>
<div id="middlesection">
	<div id="navmenu">Navigation
		<ul><li>One Link</li><li>One Link</li><li>One Link</li><li>One Link</li></ul>

	</div>
	<div id="content">Content goes here
	<p>
	Empty
	

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas fermentum, elit non lobortis cursus, orci velit suscipit est, id mollis turpis mi eget orci. Ut aliquam sollicitudin metus. Mauris at sapien sed sapien congue iaculis. Nulla lorem urna, bibendum id, laoreet iaculis, nonummy eget, massa. Phasellus ullamcorper commodo velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus est. Maecenas felis augue, gravida quis, porta adipiscing, iaculis vitae, felis. Nullam ipsum. Nulla a sem ac leo fringilla mattis. Phasellus egestas augue in sem. Etiam ac enim non mauris ullamcorper scelerisque. In wisi leo, malesuada vulputate, tempor sit amet, facilisis vel, velit. Mauris massa est, sodales placerat, luctus id, hendrerit a, urna. Nullam eleifend pede eget odio. Duis non erat. Nullam pellentesque.

Cras molestie. Curabitur id urna. Suspendisse tempor. Aliquam erat volutpat. Aliquam erat volutpat. Nam ultricies metus sit amet erat. Suspendisse eget ipsum ut purus imperdiet suscipit. Mauris sed urna at diam volutpat placerat. Nulla vitae tortor. Nulla sed nisl.

Morbi lorem. Etiam scelerisque rhoncus orci. Nunc elementum ante ac leo. Vestibulum venenatis dictum nunc. Donec turpis est, dictum nec, fringilla nec, cursus id, quam. In nibh orci, porttitor ut, rutrum id, faucibus vitae, leo. Donec ut wisi. Vivamus ornare, lorem quis tristique dapibus, nulla nisl nonummy libero, vitae luctus sem felis vel nisl. Suspendisse lectus lacus, ultricies vitae, feugiat et, hendrerit in, quam. Pellentesque porttitor enim at lectus. Praesent viverra laoreet velit. Mauris neque odio, ornare id, rhoncus non, sollicitudin sed, lectus. Phasellus et dolor. Aenean ullamcorper risus id libero. Pellentesque ac sem eget libero aliquam tincidunt. Suspendisse neque. Curabitur egestas neque ultrices nisl. Nulla bibendum augue et tellus. Duis ultrices convallis est.
</p><p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas fermentum, elit non lobortis cursus, orci velit suscipit est, id mollis turpis mi eget orci. Ut aliquam sollicitudin metus. Mauris at sapien sed sapien congue iaculis. Nulla lorem urna, bibendum id, laoreet iaculis, nonummy eget, massa. Phasellus ullamcorper commodo velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus est. Maecenas felis augue, gravida quis, porta adipiscing, iaculis vitae, felis. Nullam ipsum. Nulla a sem ac leo fringilla mattis. Phasellus egestas augue in sem. Etiam ac enim non mauris ullamcorper scelerisque. In wisi leo, malesuada vulputate, tempor sit amet, facilisis vel, velit. Mauris massa est, sodales placerat, luctus id, hendrerit a, urna. Nullam eleifend pede eget odio. Duis non erat. Nullam pellentesque.

Cras molestie. Curabitur id urna. Suspendisse tempor. Aliquam erat volutpat. Aliquam erat volutpat. Nam ultricies metus sit amet erat. Suspendisse eget ipsum ut purus imperdiet suscipit. Mauris sed urna at diam volutpat placerat. Nulla vitae tortor. Nulla sed nisl.

Morbi lorem. Etiam scelerisque rhoncus orci. Nunc elementum ante ac leo. Vestibulum venenatis dictum nunc. Donec turpis est, dictum nec, fringilla nec, cursus id, quam. In nibh orci, porttitor ut, rutrum id, faucibus vitae, leo. Donec ut wisi. Vivamus ornare, lorem quis tristique dapibus, nulla nisl nonummy libero, vitae luctus sem felis vel nisl. Suspendisse lectus lacus, ultricies vitae, feugiat et, hendrerit in, quam. Pellentesque porttitor enim at lectus. Praesent viverra laoreet velit. Mauris neque odio, ornare id, rhoncus non, sollicitudin sed, lectus. Phasellus et dolor. Aenean ullamcorper risus id libero. Pellentesque ac sem eget libero aliquam tincidunt. Suspendisse neque. Curabitur egestas neque ultrices nisl. Nulla bibendum augue et tellus. Duis ultrices convallis est.
	
	</p>
	</div>
<br id="clearing">
</div>
<div id="footer">Footer stuff goes here</div>

</body>
</html>

The only issue is when there's very little content in the content div. As in less content than the Navigation. Then you get some ugly things.

However the point is the footer section will always be under content and navigation. And navigation will always be to the left of content, no matter how small the browser window is. even when there's very little content.

By the way I tested it in FF3, IE8 beta 2, Google Chrome, and Safari 3.1.2 for Windows.


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thanks everyone here on Tek-Tips!

Between everyone's suggestions, I was able to put together the code below which works well enough.

Pros: Keeps footer at the bottom of longer of menu or content. Content is always to right of menu, regardless of inner window size.

Cons: When height of header, menu, content and footer is less than inner window size, the footer still tracks the longer of menu or content, not the bottom of the window.

-Sean

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>CSS 4-Section Layout</title>
	<style type="text/css">
		* {
		padding: 0;
		margin: 0;
		}
		body	{
			margin: 0px 0px 0px 0px;
			border: 0px
			padding: 0px 0px 0px 0px;
			font-family: Arial, Helvetica, Sans-serif;
			background: LightYellow;
		}
		#container {
			margin: 0px 0px 0px 0px;
			border: 0px
			padding: 0px 0px 0px 0px;
			background: LightCyan;
		}
		.div01Class {
			height: 80px;
			min-width: 400px;
			margin: 0px 0px 0px 0px;
			border: 0px;
			padding: 0px 0px 0px 0px;
			background: LightGrey;
			clear: both;
		}
		.div02Class {
			width: 200px;
			margin: 0px 0px 0px 0px;
			border: 0px;
			padding: 0px 0px 0px 0px;
			background: LightGreen;
			display: inline;
			float: left;
			clear: left;
		}
		.div03Class {
			margin: 0px 0px 0px 0px;
			border: 0px;
			padding: 0px 0px 0px 0px;
			background: #EEE;
			float: left;
			display: inline;
			clear: right;
		}
		.div04Class {
			width: 100%;
			height: 80px;
			margin: 0px 0px 0px 0px;
			border: 0px;
			padding: 10px 0px 0px 0px;
			background: LightSalmon;
			clear: both;
		}
	</style>
	<script type="text/javascript">
		var rows=100;
		var cols=10;
	</script>
</head>
<body>
	<div id="container">
		<div class="div01Class">
			<h2>
				Header
			</h2>
		</div><!-- div01Class -->
		<div class="div02Class">
			<h2>
				Menu
			</h2>
			<ul>
					<SCRIPT type="text/javascript">
						for(itemCnt=1;itemCnt<=5;itemCnt=itemCnt+1){
							document.writeln("<li>Item " + itemCnt + "<\/li>");
					}
					</script>
			</ul>
		</div><!-- div02Class -->
		<div class="div03Class">
			<h2>
				Content
			</h2>
			<table>
				<caption>
					Table
				</caption>
				<tr>
					<th>
						Count
					</th>
					<SCRIPT type="text/javascript">
						for(colCnt=1;colCnt<=cols;colCnt=colCnt+1){
							document.writeln("<th nowrap>Column " + colCnt + "<\/th>");
					}
					</script>
				</tr>
				<script type="text/javascript">
					var rnd = 0;
					for(rowCnt=1;rowCnt<=rows;rowCnt=rowCnt+1){
						document.writeln("<tr>");
						document.writeln("<td>" + rowCnt + "<\/td>");
						for(colCnt=1;colCnt<=cols;colCnt=colCnt+1){
							rnd = Math.random();
							rnd = Math.round(rnd * 100);
							document.writeln("<td>" + rnd + "<\/td>");
						}
						document.writeln("<\/tr>");
					}
				</script>
			</table>
		</div><!-- div03Class -->
	</div><!-- container -->
	<div class="div04Class">
		<h2>
			Footer
		</h2>
	</div><!-- div04Class -->
</body>
</html>
 
Upvote 0 Downvote
Here is your code with a few tweaks you might ot might not like:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>CSS 4-Section Layout</title>
    <style type="text/css">
        *, th, table, td, tr, body, header, nav, content, footer {
        padding: 0;
        margin: 0;
	border: 0;
        }
      
	  body    {
            font-family: Arial, Helvetica, Sans-serif;
            background: LightYellow;
        }
        .header {
            height: 80px;
            background: LightGrey;
        }
        .nav {
            width: 15%;
            background: LightGreen;
            float: left;
                    }
        .content {
            background: #EEE;
        }
        .footer {
            width: 100%;
            height: 80px;
            padding-top: 10px;
            background: LightSalmon;
            clear: both;
        }
    </style>
    <script type="text/javascript">
        var rows=100;
        var cols=10;
    </script>
</head>


<body>

        <div class="header">
            <h2>
                Header
            </h2>
    </div><!-- div01Class -->
    
    <div class="nav">
            <h2>
                Menu
            </h2>
            <ul>
                    <SCRIPT type="text/javascript">
                        for(itemCnt=1;itemCnt<=5;itemCnt=itemCnt+1){
                            document.writeln("<li>Item " + itemCnt + "<\/li>");
                    }
                    </script>
            </ul>
    </div><!-- div02Class -->
    
    <div class="content">
            <h2>
                Content
            </h2>
            <table>
                <caption>
                    Table
                </caption>
                <tr>
                    <th>
                        Count
                    </th>
                    <SCRIPT type="text/javascript">
                        for(colCnt=1;colCnt<=cols;colCnt=colCnt+1){
                            document.writeln("<th nowrap>Column " + colCnt + "<\/th>");
                    }
                    </script>
                </tr>
                <script type="text/javascript">
                    var rnd = 0;
                    for(rowCnt=1;rowCnt<=rows;rowCnt=rowCnt+1){
                        document.writeln("<tr>");
                        document.writeln("<td>" + rowCnt + "<\/td>");
                        for(colCnt=1;colCnt<=cols;colCnt=colCnt+1){
                            rnd = Math.random();
                            rnd = Math.round(rnd * 100);
                            document.writeln("<td>" + rnd + "<\/td>");
                        }
                        document.writeln("<\/tr>");
                    }
                </script>
            </table>
        </div><!-- div03Class -->
    
    <div class="footer">
        <h2>
            Footer
        </h2>
    </div><!-- div04Class -->




</body>
</html>

Might make things a little simpler.

HTH.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
129
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
55
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
44
tyutghf
tyutghf
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
67
LyndonOHRC
LyndonOHRC
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
76
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top