No replies
raydona's picture
Last seen: 10 years 38 weeks ago
Timezone: GMT+5.5
Joined: 2011-11-21
Posts: 1
Points: 2

Following is my code for a footer. I want the "twitter" image together with the line "Join the conversation today!" to be on the same horizontal line and to the right of the caption "Join Us on Facebook". In other words I want the twitter caption and words associated with it to be raised. The two ways I can do this is to use a negative margin-top or absolute positioning. Neither solution makes for a good fluid page and so are not suitable. I wonder if anyone has a good ideal solution. All help will be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
<title>Test Page</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, p, form {
img { border:none }
a:hover { text-decoration: underline; }
body {
font-family:Verdana, Geneva, sans-serif;
#wrap {
min-width: 71.08em;
{  padding: 0.5em 0 2em 0.1em;
   min-width: 71.08em;
   border-top: 0.06em solid #000;
   border-bottom: 0.06em solid #000;
   background-color: #473C8B;
   font-family: "Sans-serif", Arial;
   color: #FFFFFF;
#footer h5
{  font-size: 1.06em;
   letter-spacing: 0.07em;
   margin: 0.5em 0 0.5em 0;
#footer p
{  font-size: 0.79em;
   line-height: 150%;
   word-spacing: 0.5em;
   letter-spacing: 0.1em;
{  float: left;
   margin-right: 0.8em; 
{  color: #FFFFFF;
   text-decoration: underline;
.List1, .List2 
{  margin: 0.5em 0.5em;
   height: 8.13em;
   float: left;   
   border-right: 0.12em dotted;
   list-style: none;
{  width: 15.88em;
{  width: 12.88em;
   margin-right: 3em;
.List1 li.title, .List2 li.title
{  font-size: 1.02em;
   font-weight: bold;
   color: #FFFFFF;
   margin-bottom: 0.5em;
.List1 li a, .List2 li a
{  font-family: arial, verdana, sans-serif;
   font-size: 0.79em;
   color: #FFFFFF;
   letter-spacing: 0.1em;
{  padding-right: 0;
   padding-bottom: 0;
   width: auto;
   float: right;
   text-align: center;
div.img img
{  display: inline;
   margin: 3px;
{  text-align: center;
   font-weight: normal;
   width: 120px;
   margin: 2px;
a.twitter, a.twitter:hover
{  color: #FFFFFF;
<div id="wrap">
      <div id="footer">      
        <ul class="List1">
          <li class="title">This is my special drctry<br></li>
          <li><a href="#">Directory A</a></li>
          <li><a href="#">Directory B</a></li>
          <li><a href="#">Directory C</a></li>
          <li><a href="#">Directory D</a></li>
          <li><a href="#">Directory E</a></li>
        <ul class="List2">
          <li class="title">More Info<br></li>
          <li><a href="#">Add Your Site</a></li>
          <li><a href="#">Advertise on our site</a></li>
          <li><a href="#">Complaints</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact Us</a></li>
        <h1>Join Us on Facebook</h1>
          <img src="facebook.png" alt="facebook" width="80" height="80" class="facebook">
           Join us on <a class="facebook" href="#">Facebook</a> - 
           </br>you can meet us, write</br> reviews and join the</br>
          <div class="img">
           <a target="_blank" href="#"><img src="twitter.png"
              alt="twitter" width="80" height="16" /></a>
             <div class="desc"><a class="twitter" href="#">
                Join the conversation today!</a></div>

facebook.png11.83 KB
twitter.png887 bytes