CODEWITHSUNDEEP
htmlcss
user3142334
user3142334

Reputation: 53

footer content not being aligned properly

I am using the following html and css code for my footer but it is not giving the right output.I want one line to the left and the menu to the right of the footer.

HTML 

   <div id="footer">
    <span style="float:left;" >  Copyright 2014 © Grand Cinemas. All Rights Reserved</span>
    <span style="float:right;"><ul>
             <li><a href="http://localhost/cinema/home">Home</a></li>
     <li><a href="http://localhost/cinema/home/Feedback">Feedback</a></li>
              <li><a href="http://localhost/cinema/home/logout">Log out</a></li>

        </ul></span></div></font>

CSS

#footer{
list-style:none;

 background: white;
 width:1310px;
height:20px;
 }
 #footer li /*Styling the li part of the menu*/
{
float:left;

display: block;
color: white;

text-align:center;
margin-left:20px;
margin-top:0px;
border:none;


 }

Thanks in advance.

Upvotes: 0

Views: 445

Answers (3)

TLindig
TLindig

Reputation: 50090

You code will work, if you disable the default margin of ul.

Add this to you css:

#footer ul { margin:0; }

Upvotes: 1

nike4613
nike4613

Reputation: 39

How about HTML:

<div id="footer">
    <span class="left footer-el" >  Copyright 2014 © Grand Cinemas. All Rights Reserved</span>
    <span class="right footer-el" ><ul>
             <li><a href="http://localhost/cinema/home">Home</a></li>
     <li><a href="http://localhost/cinema/home/Feedback">Feedback</a></li>
              <li><a href="http://localhost/cinema/home/logout">Log out</a></li>

        </ul></span></div></font>

With the following CSS addition:

.footer-el{
  width: 50%;
  display: inline-block;
  height: 100%;
}

Upvotes: 0

Farre
Farre

Reputation: 36

Not sure if I understand you right, but I will try. You will need to add another element in between the left part of the footer and the right part, like a center part.

OR

You can use padding or margin on the right/left element to create distance between it and the left/right element.

Upvotes: 0

Related Questions