Hi, I want to split a footer with CSS because I want to have a left & right alignment.

Any suggestion?

body { 	font-family: Verdana, Arial, Helvetica, sans-serif; 	font-size: 11px; 	line-height: 16px; 	color: #333333; 	background-color:#CCCCCC; 	margin:0px; 	padding: 0px; } a { 	color: #12B7ED; } a:visited { 	color: #3C88B0; } a:hover { 	color:#0C7598; } h1 { 	font-size: 22px; 	font-weight: normal; 	color: #11B4EB; 	margin-top: 0px; 	margin-bottom: 20px; } .footer{ 	border-top-width: 1px; 	border-top-style: solid; 	border-top-color: #CCCCCC; 	font-size: 9px; 	color:#000000; 	text-align: right; 	background-color: #EAEAEA; } .footer-l { 	border-top-width: 1px; 	border-top-style: solid; 	border-top-color: #CCCCCC; 	font-size: 9px; 	color:#000000; 	text-align: left; 	width::-10px; 	background-color: #EAEAEA; } .menu_nav { 	color: #ffffff; 	padding-top: 7px; 	padding-left: 10px; 	padding-bottom: 7px; } .menu_nav a{ 	color: #12B7ED; 	text-decoration: none; 	padding-right: 15px; 	font-size:12px } .menu_nav a:visited{ 	color: #12B7ED; 	text-decoration: none; } .menu_nav a:hover{ 	color: #ffffff; 	text-decoration: none; } .footer a { 	color: #999999; 	text-decoration: none; } .footer a:hover { 	color: #666666; 	text-decoration: underline; } .left_column {     font-size:12px; 	padding-top: 15px; 	padding-left: 10px; 	padding-right: 10px; 	width: 150px; 	color:#11B4EB; 	font-weight: bold; 	background-color:#EAEAEA; } .left_column_blue { color:#3399FF; font-weight: bold; } .left_column_green { color:#33CC33;  font-weight: bold; } .left_column_black { color:#000000; font-weight: bold; } .left_column ul{ 	margin: 0px; 	padding: 0px; 	list-style-type: none; 	font-size:12px } .left_column li{ 	padding-top: 2px; 	padding-bottom: 2px; } .left_column a{ 	text-decoration: none; 	font-weight: bold; } .right_column { 	padding-top: 15px; 	padding-bottom: 25px; 	padding-right: 10px; 	width: 850px; } .right_column_link_blue {color: #0000CC; }  .right_column_main { 	font-size:24px; 	font-weight: bold; } #container { 	background-color: #FFFFFF; 	height: 400px; 	width: 800px; 	color: inherit; } #local-container { 	color: #FFFFFF; 	position: relative; 	height: 400px; 	background-color:inherit; } .columns { 	background-color: #FFFFFF; 	width: 220px; 	height: 60px; 	float: left; 	color: #000000; } #container-pam { 	background-color: #FFFFFF; 	height: 400px; 	width: 800px; 	color: inherit; } #local-container-pam { 	color: #FFFFFF; 	position: relative; 	height: 400px; 	background-color: inherit; } .columns-left1-pam{ 	background-color: #FFFFFF; 	width: 150px; 	height: 20px; 	float: left; 	color: #000000; } .columns-left2-pam{ 	background-color: #FFFFFF; 	width: 150px; 	height: 20px; 	float: left; 	color: #000000; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <link href="../css_style.css" rel="stylesheet" type="text/css" /> <link rel="Shortcut Icon" href="favicon.ico"/> <!-- Added by me --> </head>  <body> <table width="1038" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">   <tr> <td colspan="2"><img src="../source_files/header.png" alt="header" width="1038" height="140" /></td>   </tr>   <tr>     <td colspan="2" bgcolor="#333333" class="menu_nav"><a href="../index.html">. Home</a><a href="../xxx.html">. xxx</a><a href="../yyy.html">. yyy</a><a href="../zzz.html">. zzz</a><a href="../portal.html">. Portal</a><a href="../aaa.html">. aaa</a><a href="../bbb.html">. bbb</a> <a href="(URL address blocked: See forum rules)=85543&lang=en">. Feedback</a> <a href="../search.php" target="_self">. Search</a></td>   </tr>   <tr>     <td width="178" valign="top" class="left_column"><!-- TemplateBeginEditable name="left_column" -->       <ul>         <li><a href="#">Subnav Item 1</a></li>         <li><a href="#">Subnav Item 2 </a></li>         <li><a href="#">Subnav Item 3</a></li>       </ul>     <!-- TemplateEndEditable --></td>     <td width="860" valign="top" class="right_column"><!-- TemplateBeginEditable name="right_column" -->       <h1>Main content </h1>       <p>Lorem ipsum dolor sit amet, consectetuer  adipiscing elit. Cras a quam eu sapien elementum eleifend. Suspendisse ultrices  sapien ac diam. Fusce arcu tellus, degestas eu, porta vitae, tristique nec, dui.  Phasellus vel velit. Cras neque. Vestibulum ante ipsum primis in faucibus orci  luctus et ultrices posuere cubilia Curae; Aenean molestie, lacus ac mattis  adipiscing, magna risus imperdiet magna, eget ullamcorper arcu nulla tincidunt  do lor. Vestibulum scelerisque eleifend nisi. Donec quam turpis, molesti e id, consequat  vel, cursus nec, massa. Integer  nisi neque, facilisis non, tempor at, convallis vel, enim. Ut ac magna. Quisque  ligula mi, luctus at, accumsan ut, nonummy a liquet, nisi.</p>       <p> Proin arcu. Donec non enim. Aliquam risus nisl,  nonummy varius, tincidunt quis, dictum et, nisl. Praesent sapien urna, viverra  nec, feugiat et, interdum ut, turpis. Sed nec purus. Phasellus a tortor. Nullam  pharetra. Nulla facilisi. Ut sodales justo in eros. Praesent volutpat posuere  metus. Ut viverra, dolor quis blandit laoreet, odio diam blandit tortor, vitae  ullamcorper felis orci at augue. In hac habitasse platea dictumst. Fusce at  odio. Pellentesque habitant morbi tristique senectus et netus et malesuada  fames ac turpis egestas. </p>     <!-- TemplateEndEditable --></td>   </tr>   <tr>   	<td colspan=2 class="footer">Version 1.0 | 07-24-09 Author: MySelft</td>     </tr> </table> </body> </html>

Recommended Answers

All 5 Replies

Hi there,

Two basic ways I do this on a regular basis are:

- Creating two divs within the footer div, one with a left float and one with a right float. From there you can apply the left and right text-align styles. Don't forget to set the div widths. You may also need to clear: both after this.

<div id="footer">
  <div id="footer_left">
    <p>Left side text</p>
  </div>
  <div id="footer_right">
    <p>Right side text</p>
  </div>
</div>
<div class="spacer">&nbsp;</div><!-- Has clear:both style applied to it-->

- Create a two celled table inside the footer, again applying styles for left and right alignment, width, etc.

<div id="footer">
  <table width="600">
    <tr>
      <td width="300">Left side test</td>
      <td>Right side test</td>
    </tr>
  </table>
</div>

Hope either of these works for you
=D

Hi there,

Two basic ways I do this on a regular basis are:

- Creating two divs within the footer div, one with a left float and one with a right float. From there you can apply the left and right text-align styles. Don't forget to set the div widths. You may also need to clear: both after this.

<div id="footer">
  <div id="footer_left">
    <p>Left side text</p>
  </div>
  <div id="footer_right">
    <p>Right side text</p>
  </div>
</div>
<div class="spacer">&nbsp;</div><!-- Has clear:both style applied to it-->

- Create a two celled table inside the footer, again applying styles for left and right alignment, width, etc.

<div id="footer">
  <table width="600">
    <tr>
      <td width="300">Left side test</td>
      <td>Right side test</td>
    </tr>
  </table>
</div>

Hope either of these works for you
=D

Thanks. It was very helpful. I used the approach of div because I want to stay away from tables. However, what do you mean with this: <!-- Has clear:both style applied to it--> ?

.footer{
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCCCCC;
	font-size: 9px;
	color:#000000;
	background-color: #EAEAEA;
}
#footer-left {
	float:left;
	
}
#footer-center {
	float:center;
}
#footer-right {
	float:right;

}
.spacer
{
overflow: auto; 
height: 1%;
background-color:#EAEAEA;
}
<tr>
  <td class="spacer">
    <td colspan="2" class="footer">
	  <div id="footer-left">Version 1.0/07-24-09 | Author: Yo</div>
	 <div id="footer-center">Center</div>
      <div id="footer-right">DARA</div>
	  </td>
  </td>
  </tr>

Now I want to add also a center in the footer. I tried but when I uncomment the code for the center it became a mess.

Hello again,

The reason for the div class="spacer" with the style clear:both is because you could end up with some horrible results if its not there. Especially if you have anything after the footer, such as a tag to your website. So if would look like this:

<div class="spacer">&nbsp;</div>
div.spacer {
  clear: both;
}

However if your not getting any issues, don't worry about it too much. Just bear if in mind for future reference.

Now...for three columns, divs only, try this:

<div id="footer">
  <div id="footer_left">
    <p>Left Text</p>
  </div>
  <div id="footer_middle">
    <p>Middle Text</p>
  </div>
  <div id="footer_right">
    <p>Right Text</p>
  </div>
  <div class="spacer">&nbsp;</div>
</div>
div#footer {
    margin: 10px auto;
	width: 600px;
}

div#footer_left {
	float: left;
	width: 200px;
}

div#footer_middle {
	float: left;
	width: 200px;
}

div#footer_right {
	float: right;
	width: 200px;
}

div.spacer {
	clear: both;
}

You need the div class="spacer" with the clear: both style for this. Let me know how this works for you.

Laura

Hi,

here's another layout trick that you can also apply in your page:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
html, body {
  color : #405060;
  font : normal normal normal 95%/1.5 Verdana, Tahoma, Arial, san-serif;
  height : auto;
  margin : 0;
  padding : 0;
  text-align : center;
  width : auto; }

body {
  background-color : #E0E0E0; }

div {
  border : none; 
  margin : 0;
  padding : 0;
}

div#main {
  margin : 0 auto;
  width : 100%;
  overflow : hidden; }

div#pad {
  padding : 1em; }

div#header {
  border-top : 2px solid #ccc;
  border-bottom : 2px solid #ccc;
  min-height : 150px;
  background-color : #fff;
  width : 100%; }

div#bdy {
  min-height : 300px;
  background-color : #fff;
  width : 100%; }
  
div#footer {
  border-bottom : 2px solid #ddd;
  overflow : hidden;
  min-height : 35px;
  background-color : #373832;
  width : 100%; }

div#footer div#foot-left {
  clear : left;
  float : left;
  height : 35px;
  background-color : #fff;
  width : 35%; }

div#footer div#foot-center {
  clear : none;
  color : #fff;
  float : left;
  height : 35px;
  background-color : transparent;
  width : 30%; }

div#footer div#foot-right {
  clear : right;
  float : right;
  height : 35px;
  background-color : #fff;
  width : 35%; }

div.tube {
  letter-spacing : 4px;
  line-height : 35px; }
/* ]]> */
</style> 
</head>
<body>
<div id="main">
<div id="pad">
<div id="header"><div class="tube">HEADER</div></div>
<div id="bdy"><div class="tube">BODY</div></div>

<div id="footer">
<div id="foot-left"><div class="tube">LEFT FOOT</div></div>
<div id="foot-center"><div class="tube">CENTER FOOT</div></div>
<div id="foot-right"><div class="tube">RIGHT FOOT</div></div>

</div>
</div>
</div>
</body>
</html>

hope we both helped...
essential

Thanks both. I went able to solved the problem & learn.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.