Trying to figure out why my footer images are floating to the right. Please help!

Question

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Stanley Abraham | Designer |</title> <link rel="stylesheet" href="css/._normalize.css"> <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Stanley Abraham</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html"> Portfolio</a></li> <li><a href="about.html" >About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Info</h3> <p> If you need help with any projects,I am availible for work. If you have any questions, please don't hesitate to contact me!</p> <p>Please only use phone contact for emergency inquiries. I can be best reach via email or tweeter.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"> <a href="tel:857-654-4134">857-654-4134</a></li> <li class="mail"> <a href="mailto:Stan773@gmail.com"> Stan773@gmail.com</a></li> <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=standaman777"> @StanDaMan777</a></li> </ul> </section> <footer> <a href="https://www.facebook.com/stanley.abraham.560"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <a href="http://instagram.com/standaman777"><img src="img/instagram-logo.png" alt="Instagram Logo" class="social-icon"></a> <a href="https://twitter.com/StanDaMan777"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <p> Socail media links</p> <p>© 2014 Stanley Abraham</p> </footer> </div>
</body>
</html>

@media screen and (min-width: 480px) {

 /************************************
           TWO COLUMN LAYOUT
 ************************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    width: 40%;
    float: right;
    }
  }
@media screen and (min-width: 660px) {

}

http://port-80-hvtgzcti4d.treehouse-app.com/contact.html

EDIT: Press edit to see what i did to achieve the highlighting effect on your CSS code. If you have more code, the forum will suck it and hide it, aslo it will be easier for us to look at it and copy to make any changes if needed. Please take a little to make code reading better

Answer 1 · 2014-12-02T03:33:33Z

December 2, 2014 3:33am

Hi Stanley,

Have you tried using the 'clear' property? This is ideal for elements such as footers. In your CSS you might try something like

#footer {
  clear: both;
  }

also this link has a good 'at a glance summary of what is happening there...

http://css-tricks.com/almanac/properties/c/clear/

Hope that helps

Answer 2 · 2014-12-02T03:33:25Z

December 2, 2014 3:33am

Your images are not floating to the right. The img element is an inline element (it does not insert a new line on a page), meaning that text and other elements can wrap around it.

So what you are seeing is:

<img><img><img>

I'm guessing you want is:

<img>
<img>
<img>

There are several ways to achieve this. One way would be to give the images a css style to change its display to "block". Like this:

<img style="display:block;">

You can also wrap them in an element that, by default, has its display to block. Like in a div or li tag. Like this:

<div>
    <img>
</div>

or

<ul>
  <li>img</li>
</ul>

Welcome to the Treehouse Community

Looking to learn something new?

Stanley Abraham

Stanley Abraham

Trying to figure out why my footer images are floating to the right. Please help!

2 Answers

Kim Cowart

Kim Cowart

carlosjimenez

carlosjimenez

carlosjimenez

carlosjimenez