Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aris Constantinou
2,687 PointsMessed 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>© 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;
}
1 Answer
Amy Norris
9,718 PointsYeah, 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.
Aris Constantinou
2,687 PointsIt worked , thank you amy, that opened my mind to learn more css :)
melisa pettaway
9,556 Pointsmelisa pettaway
9,556 Pointsare you able to post the css&/html you are using.