Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Messed up floated items/sections

My website: lifeofaris.se/fresh

Everything looks ok , but when try to add background-color to #galleryproducts it won't work. It must be a floating problem because when i use inspector on chrome, when i hover over .boxes it wont show anything, but when i hover over .latest it shows the boxes and clearly shows that the floating is messed up.

So what i am trying to solve is to be able to add a background color to the latest section including the h1 with it.

<!DOCTYPE html>
<html>
 <head>
     <link rel="stylesheet" href="css/framework.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
     <script src="js/custom.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">      
  <title>NK Electrical LTD</title>
 </head>
 <body>
     <header>
         <div class="logo">
            <img src="img/nklogo.png"alt="NK Logo">
         </div>
         <p class="fb">Follow us on <a href="http://facebook.com/nkelectricalltd"><img src="img/fb.png"alt="Facebook Logo" class="social-icon"></a></p>
         <p class="emergency">Emergency-call-number:2222222</p>
         <nav>
            <ul>
                <li><a href="index.html" class="selected">Home</a></li>
                <li><a href="electrical.html">Electrical Installations</a></li>
                <li><a href="lighting.html">Lighting</a></li>
                <li><a href="appliances.html">Home Appliances</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
      </nav>
     </header>
     <div class="container">
         <div class="slider">
            <img src="img/slider.jpg"alt="slider">
         </div>
         <section class="boxes">
             <h1>boss</h1>
        <ul id="gallery">
          <li>
            <a href="img/logoone.png">
              <img src="img/electrical.png" alt="">
              <p>Electrical Installations</p>
            </a>
          </li>
          <li>
            <a href="img/lighting.png">
              <img src="img/lighting.png" alt="">
              <p>Lighting</p>
            </a>
          </li>
          <li>
            <a href="img//homeappliances1.png">
              <img src="img//homeappliances1.png" alt="">
              <p>Electrical Appliances</p>
            </a>
          </li>
          <li>
            <a href="img/homeappliances2.png">
              <img src="img/homeappliances2.png" alt="">
              <p>Kitchen Appliances</p>
            </a>
          </li>
        </ul>
      </section>
        <section class="latest">
            <h1>Our latest products</h1>
         <ul id="galleryproducts">
          <li>
            <a href="img/1.jpg.png">
              <img src="img/1.jpg" alt="">
              <p>Electrical Installations</p>
            </a>
          </li>
          <li>
            <a href="img/2.jpg">
              <img src="img/2.jpg" alt="">
              <p>Lighting</p>
            </a>
          </li>
          <li>
            <a href="img/3.jpg">
              <img src="img/3.jpg" alt="">
              <p>Electrical Appliances</p>
            </a>
          </li>
          <li>
            <a href="img/4.jpg">
              <img src="img/4.jpg" alt="">
              <p>Kitchen Appliances</p>
            </a>
          </li>
        </ul>
         </section>
          <footer>
        <p>&copy; NK ELECTRICAL LTD 2016 ALL RIGHTS RESERVED</p>
      </footer>
     </div>
 </body>
</html>

CSS
-----


*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
.container {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
    overflow: hidden;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
}
header{
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}
.logo{
text-align: center;
margin: 0;
}
nav{
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
    background-image: url(images/Upperheadershadow.png);
    background-repeat: no-repeat;
}
nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}
nav li {
  display: inline-block;
}
nav a {
  font-weight: 800;
  padding: 15px 10px;
}
.fb img {
width:5%
;}
.fb, .emergency
{
text-align: right;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
.slider{
width:100%;
padding: 0;
margin: 0 auto;}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #1c1c1c;
  color: #bdc3c7;
}
#gallery li:nth-child(3n) {
    clear: left;
  }
#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 1.25em;
  background-color: #483636;
  color: #bdc3c7;
  text-align:center;
}
#galleryproducts {
    margin:0;
    padding:0;
    list-style: none;
    background-color: red;
}
#galleryproducts li {
    float:left;
    width:20%;
    margin:2.5%;
}
.slider{
    clear:both;
}
footer{
    clear: both;
}
.clearfix{
    clear: both;
}
.clear:after {
    clear: both;
    content: "";
    display: table;
}
melisa pettaway
melisa pettaway
9,556 Points

are you able to post the css&/html you are using.

1 Answer

Yeah, the float is causing the space to collapse (so the background is there, the browser just thinks it's taking up no space). Add display: inline-block; to your galleryproducts id CSS and that should fix it for you.

It worked , thank you amy, that opened my mind to learn more css :)