Please help with CSS/HTML footer

Discussion in 'Web Design and Development' started by macaddict23, Jun 19, 2008.

  1. macaddict23 macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #1
    Okay, to better explain this, I've posted an illustration of the web page layout I'm trying to build.

    [​IMG]

    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.
     
  2. japaternoster macrumors newbie

    Joined:
    Nov 20, 2007
    #2
    Could you post some code for us to have a look at?
     
  3. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #3
    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>
     
  4. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #4
    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 */
    
     
  5. japaternoster macrumors newbie

    Joined:
    Nov 20, 2007
    #5
    at a quick glance you are missing the } at the end of the #footer css. Will have a look at making it reach the bottom.
     
  6. japaternoster macrumors newbie

    Joined:
    Nov 20, 2007
    #6
    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 */
     
  7. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #7
    That looks like it might actually work. Thank you so much!
     
  8. japaternoster macrumors newbie

    Joined:
    Nov 20, 2007
    #8
    no problems, let us know if you have any more questions and when the site is complete.
     

Share This Page