[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2012-08-13
4
Medium Priority
?
588 Views
Last Modified: 2012-08-13
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

0
Comment
Question by:JoachimPetersen
  • 2
  • 2
4 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 38287494
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

0
 

Author Comment

by:JoachimPetersen
ID: 38287850
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.
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 2000 total points
ID: 38287903
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/
0
 

Author Comment

by:JoachimPetersen
ID: 38288334
Thank you, and that is a very useful link, I might use it some other time.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question