Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Please help with CSS/HTML footer

macaddict23

macaddict23

macrumors 6502
Original poster
Okay, to better explain this, I've posted an illustration of the web page layout I'm trying to build.

layout.png


TOP GRAPHIC:
I have my purple footer containing a single line of text. I don't want the purple background of the footer to stop short.

BOTTOM GRAPHIC:
No matter how much content is in this footer, or how big the viewer stretches his/her window, I want the purple back to infinitely expand.

How do I make this happen? I've tried giving my footer DIV a height of 100% but with no luck. Thanks in advance, and I hope this wasn't confusing.
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Welcome To Sample Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="mainwrap">
<div id="contentarea" class="clearfix">

     <div id="leftcontent">
         <div id="leftcontent-inner">
               <p>This is the left content</p>
         </div><!--end leftcontent-inner-->
     </div><!--end leftcontent-->

     <div id="rightcontent">
         <div id="rightcontent-inner">
               <p>This is the right content</p>
         </div><!--end rightcontent-inner-->
     </div><!--end rightcontent-->

</div><!--end contentarea-->
</div><!--end mainwrap-->

<div id="footer"><p>© 2008 Sample Company. All Rights Reserved.</p>
</div><!--end footer-->
</body>
</html>
 
Here's the CSS. I know I have to clean it up by using shorthand methods.

Code: 
body {
	background-color: black;
	font-size: 12px;
	line-height: 19px;
	font-family: verdana, helvetica, arial, sans-serif;
	color: white;
	min-width: 900px;
	margin: 0px;
	padding: 0px;}
	
#mainwrap {
	width: 900px;
	margin-left: auto;
	margin-right: auto;}
	
#contentarea {
	width: 900px;}
	
#leftcontent {
	width: 680px;
	float: left;}

#righttcontent {
	width: 220px;
	float: left;}

#rightcontent-inner, #leftcontent-inner {
	background-color: white;
	padding: 20px;}
	
#footer {
	background-color: #723694;
	text-align: center;
	
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
	
.clearfix {
	display: inline-table;}
/* backslash hides from IE mac \*/

* html .clearfix {
	height: 1%;}

.clearfix {
	display: block;}
/* end backslash hack */
 
Sorted it for u mate, I am not a pro, but this is a solution that does work. Basically what I did was make the background of the whole body purple then add a div around the main container which has a black background.

HTML
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Welcome To Sample Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="bulk">
<div id="mainwrap">
	<div id="contentarea" class="clearfix">
	
		 <div id="leftcontent">
			 <div id="leftcontent-inner">
				   <p>This is the left content</p>
			 </div><!--end leftcontent-inner-->
		 </div><!--end leftcontent-->
	
		 <div id="rightcontent">
			 <div id="rightcontent-inner">
				   <p>This is the right content</p>
			 </div><!--end rightcontent-inner-->
		 </div><!--end rightcontent-->

	</div><!--end contentarea-->
</div><!--end mainwrap-->
</div>

<div id="footer">
	<p>© 2008 Sample Company. All Rights Reserved.</p>
</div><!--end footer-->

</body>
</html>

CSS
Code: 
body {
	background-color: #723694;
	font-size: 12px;
	line-height: 19px;
	font-family: verdana, helvetica, arial, sans-serif;
	color: black;
	min-width: 900px;
	margin: 0px;
	padding: 0px;
	}


#mainwrap {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	}
	
#bulk{
	width: 100%;
	background-color: black;
	}

#contentarea {
	width: 900px;}
	
#leftcontent {
	width: 680px;
	float: left;}

#righttcontent {
	width: 220px;
	float: left;}

#rightcontent-inner, #leftcontent-inner {
	background-color: white;
	padding: 20px;}
	
#footer {
	text-align: center;}
	

	
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
	
.clearfix {
	display: inline-table;}
/* backslash hides from IE mac \*/

* html .clearfix {
	height: 1%;}

.clearfix {
	display: block;}
/* end backslash hack */
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back