Split footer with CSS

Question

kako13 1 Junior Poster in Training

15 Years Ago

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>

html-css web-design

3 Contributors
5 Replies
219 Views
1 Week Discussion Span
Latest Post 15 Years Ago Latest Post by kako13

laura_ci 0 Junior Poster in Training

15 Years Ago

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

laura_ci 0 Junior Poster in Training

15 Years Ago

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

Reply to this topic

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.

kako13 1 Junior Poster in Training · Answer 1 · 2009-07-25T00:52:33+00:00

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>
- 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:  ?

.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.

essential 84 Posting Shark Featured Poster · Answer 2 · 2009-07-27T17:35:37+00:00

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

kako13 1 Junior Poster in Training · Answer 3 · 2009-08-03T19:51:22+00:00

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