float:left is causing the social media icons to move next to first image on the top.

Question

Even though the footer is outside the #wrapper ,#gallery , the settings of float is being applied to the gallery and the footer. Can you explain how it functions and how to correct it?

<body>
    <header>
      <a href="index.html" id="logo">
      <h1>Kosha India</h1>
      <h2> Indian Store</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Shop</a></li>
          <li><a href="About.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p> Experiment with colors and texture</p>
            </a>

            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p> Experiment with colors and texture</p>
            </a>

            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p> Experiment with colors and texture</p>
            </a>

            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p> Experiment with colors and texture</p>
            </a>

            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p> Experiment with colors and texture</p>
            </a>
          </li>
        </ul>
      </section>
     </div>
    <footer>
      <a href="https://twitter.com/KoshaIndia"><img src="img/twitter-wrap.png" alt="Twitterlogo"></a>
      <a href="https://www.facebook.com/profile.php?id=100012075392030"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
      <p>&copy; 2016 Kosha India</p>
    </footer>  
 </body>

Relevant CSS

img{
max-width:100%;
}

#wrapper{
  max-width:940px;
  margin: 0 auto;
  padding:0 5%;
}

#gallery{
margin:0;
padding:0;
list-style: none;   /*remove any bullet points*/
}

#gallery li {
float:left;
width:45%;
margin:2.5%;
background-color:#f5f5f5;
color:#bdc3c7;
}

Answer 1 · 2016-11-15T15:35:19Z

November 15, 2016 3:35pm

Without knowing what you're actually trying to achieve it's hard to establish why you need to use float at all... All i will say is that the parent to your li's is collapsing as you have no clearfix in place. If you need to use float to achieve what you need in this scenario then read up about clearfix, it's the only way to handle floats to avoid all the aggro that comes along with it. I personally try every other avenue before i need to resort to floats, as they can cause trouble when debugging why your layout/styles aren't showing how what you expected.

Answer 2 · 2017-03-29T19:09:53Z

March 29, 2017 7:09pm

Credit goes to Zette Harbour from this thread for this one but I've found the following to work:

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

Welcome to the Treehouse Community

Looking to learn something new?

alok yadav

alok yadav

float:left is causing the social media icons to move next to first image on the top.

Caleb Kleveter

Caleb Kleveter

alok yadav

alok yadav

alok yadav

alok yadav

wrapper{

logo{

gallery{

gallery li {

2 Answers

Emily Carey

Emily Carey

Oliver Hayman

Oliver Hayman