We help IT Professionals succeed at work.

Need help to fix content box not stretching and a sticky footer to bottom

JoachimPetersen
on
Hello, I just can't seem to find out what is wrong with my content box and why it is not stretching when the content inside it exceeds it's height and I can't figure out how to make a footer stick to the bottom of the page, even when the side pushes further down then the bottom then it should follow to the bottom of the page.

Thanks in advance.

HTML:
<div id="page_container">
    <div id="content_outer">
        <div id="content_inner">
            <div id="content-top">
                <h2>Text Title</h2>
                <span class="clearFix">&nbsp;</span>            </div>
            <div id="col-left">
                <div class="box">
                    <h4 class="yellow">COL1</h4>
                    <div class="box-container">
                    </div>
                </div>
            </div>
            <div id="col-mid">
                <div class="box">
                    <h4 id="SiteName" class="white">
                        COL2
                    </h4>
                    <div class="box-container">
                        <div id="padding">
                            <p>
                        sssssssssssssssss</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>ssssss</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="col-right">
                <div class="box">
                    <h4 class="light-blue">
                        COL3</h4>
                    <div class="box-container">                    </div>
                </div>
            </div>
        </div>
    </div>
        <div id="footer_outer">
            <div id="footer_inner">            </div>
        </div>
</div>

Open in new window


CSS:
body 
{
	font-size: 9pt;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

body, html 
{
	height:100%
}


form {
	height: 100%;
}

#page_container {
	width: 100%;
	height: 100%;
	margin:0px;
	padding:0px;
}


#page_container #content_outer {
	width: 100%;
	background-repeat: repeat-x;
	background-color: #f5f5e7;
	position: relative;
}
#page_container #content_outer #content_inner {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 980px;
	padding-top: 25px;
	padding-bottom: 25px;
	top: 0px;
	left: 0px;
}
#page_container #content_outer #content_inner #content-top 
{
    border-bottom: 1px solid #BCBCB7;
    margin-bottom: 15px;
    padding-bottom: 8px;
    background-color: Transparent;
}
#page_container #footer_outer {
	height: 60px;
	width: 100%;
	border-top: 1px solid #3a5863;
	background-color: #3a4f63;
	margin-bottom: 0px;
	padding: 0px;
}
#page_container #footer_outer #footer_inner {
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 980px;
	margin-top: 0px;
	position: relative;
}

span.clearFix {
	width:100%;
	height:0px;
	visibility:hidden;
	clear:both;
	display:block;
	margin:0;
	padding:0;
	font-size:0px;
}
	
.hidden {
	display:none;
}


/** box general settings **/
div.box 
{
	margin-bottom:15px;
	width:100%;
}
div.box-container
{
	background-color:#fff;
	padding:10px;
	margin:0;
}
div.box-container h5 
{
	color:#333;
	padding-left:20px;
	border-bottom:1px solid #fffff;
	font-weight:bold;
	padding-bottom:7px;
	margin-bottom:1px;
	padding-top: 1px;
}
div.box-container h5 span 
{
	font-weight:normal;
	font-size:0.9em;
}
	
div.box h4 
{
	background:#3a4043;
	text-transform:uppercase;
	font-weight:bold;
	padding:10px;
	margin:0;
}


/** columns **/
#col-left, #col-mid
{
	float:left;
	margin-right:12px;
}
#col-mid
{
	width:510px;
	position: relative;
}
#col-right
{
	margin-right:0px;
	float:right;
}
#col-left, #col-right
{
	width:223px;
	position: relative;
}


/** text colors assigned to elements in various areas **/
.yellow 
{
	color:#e8e4a2;
}
.light-blue 
{
	color:#a6b7c0;
}
.blue 
{
	color:#508db8 !important;
}
.white 
{
	color:#fff;
}

Open in new window

Comment
Watch Question

Top Expert 2011
Commented:
You always need to clear your floats.

Try this:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body 
{
	font-size: 9pt;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

body, html 
{
	height:100%
}


form {
	height: 100%;
}

#page_container {
	width: 100%;
	height: 100%;
	margin:0px;
	padding:0px;
}


#page_container #content_outer {
	width: 100%;
	background-repeat: repeat-x;
	background-color: #f5f5e7;
	position: relative;
}
#page_container #content_outer #content_inner {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 980px;
	padding-top: 25px;
	padding-bottom: 25px;
	top: 0px;
	left: 0px;
}
#page_container #content_outer #content_inner #content-top 
{
    border-bottom: 1px solid #BCBCB7;
    margin-bottom: 15px;
    padding-bottom: 8px;
    background-color: Transparent;
}
#page_container #footer_outer {
	height: 60px;
	width: 100%;
	border-top: 1px solid #3a5863;
	background-color: #3a4f63;
	margin-bottom: 0px;
	padding: 0px;
}
#page_container #footer_outer #footer_inner {
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 980px;
	margin-top: 0px;
	position: relative;
}

span.clearFix {
	width:100%;
	height:0px;
	visibility:hidden;
	clear:both;
	display:block;
	margin:0;
	padding:0;
	font-size:0px;
}
	
.hidden {
	display:none;
}


/** box general settings **/
div.box 
{
	margin-bottom:15px;
	width:100%;
}
div.box-container
{
	background-color:#fff;
	padding:10px;
	margin:0;
}
div.box-container h5 
{
	color:#333;
	padding-left:20px;
	border-bottom:1px solid #fffff;
	font-weight:bold;
	padding-bottom:7px;
	margin-bottom:1px;
	padding-top: 1px;
}
div.box-container h5 span 
{
	font-weight:normal;
	font-size:0.9em;
}
	
div.box h4 
{
	background:#3a4043;
	text-transform:uppercase;
	font-weight:bold;
	padding:10px;
	margin:0;
}


/** columns **/
#col-left, #col-mid
{
	float:left;
	margin-right:12px;
}
#col-mid
{
	width:510px;
	position: relative;
}
#col-right
{
	margin-right:0px;
	float:right;
}
#col-left, #col-right
{
	width:223px;
	position: relative;
}


/** text colors assigned to elements in various areas **/
.yellow 
{
	color:#e8e4a2;
}
.light-blue 
{
	color:#a6b7c0;
}
.blue 
{
	color:#508db8 !important;
}
.white 
{
	color:#fff;
}
                                  
								  </style>
</head>

<body>
<div id="page_container">
    <div id="content_outer">
        <div id="content_inner">
            <div id="content-top">
                <h2>Text Title</h2>
                <span class="clearFix">&nbsp;</span>            </div>
                    <div style="clear:both;"></div>

            <div id="col-left">
                <div class="box">
                    <h4 class="yellow">COL1</h4>
                    <div class="box-container">
                    </div>
                </div>
            </div>
            <div id="col-mid">
                <div class="box">
                    <h4 id="SiteName" class="white">
                        COL2
                    </h4>
                    <div class="box-container">
                        <div id="padding">
                            <p>
                        sssssssssssssssss</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>ssssss</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="col-right">
                <div class="box">
                    <h4 class="light-blue">
                        COL3</h4>
                    <div class="box-container">                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
        <div id="footer_outer">
            <div id="footer_inner">            </div>
        </div>
</div>
                                  
</body>
</html>

Open in new window

Author

Commented:
that worked for the footer but what about my content-outer, it is not stretching all the way down to the footer, only the 350px that the content-inner min-height is.
LZ1
Top Expert 2011
Commented:
Add a float:left to your content-outer.

By the way have you seen this?

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

Author

Commented:
Thank you, and that is a very useful link, I might use it some other time.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.