0

I've applied a background-color to a container but a <ul> defined inside the container doesn't seem to be applying the background color. Any thoughts to why? Also, is there a way to apply even spacing to the <ul> items so they span the width of the container evenly without applying padding? 

#smedia-container {
 
 max-width: 302px;
 max-height: 110px;
 text-align: center;
 background-color: #fbf4e8;
}
.smedia-header {
 background-color: #b90021;
 color: #000;
 min-height: 32px;
 
}
.smedia-icons {
 text-align: justify;
 width: 100%;
}
ul.smedia-icons li {
 float: left;
 display: inline-block;
 text-decoration: none;

}
.smedia-icons li a {
 text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>social media bar</title>
<link rel="stylesheet" type="text/css" href="smedia-bar.css">
</head>
<body>
<div id="smedia-container">
 <div class="smedia-header">
  <span>Social Media</span>
 </div>
 <span> Follow Us </span>
 <ul class="smedia-icons">
  <li><a href="#"><img src="some.png" alt=" "> </a> </li>
  <li><a href="#"><img src="some.png" alt=" "></a></li>
  <li><a href="#"><img src="some.png" alt=" "></a></li>
  <li><a href="#"><img src="some.png" alt=" "></a></li>
  <li><a href="#"><img src="some.png" alt=" "></a></li>
  <li><a href="#"><img src="some.png" alt=" "></a></li>
 </ul>
</div> <!--container-->
</body>
</html>
web-dev
  • 133
  • 2
  • 11
  • You have to [clear](http://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CCcQFjAA&url=http%3A%2F%2Fwww.quirksmode.org%2Fcss%2Fclearing.html&ei=DKoeVfidMMeZNrHGg5AK&usg=AFQjCNHHNzwcq4z1uA95IX2PhKz4T9Vyww&bvm=bv.89947451,d.eXY) the `ul` – Adrift Apr 03 '15 at 14:56
  • possible duplicate of [Wrapper div height is 0 with floated elements inside](http://stackoverflow.com/questions/10724513/wrapper-div-height-is-0-with-floated-elements-inside) – Oriol Apr 03 '15 at 14:58

2 Answers2

1

Since you float the list items, the list essentially collapses so the parent acts like it's not there. You can restore the behavior you're after by adding overflow:auto to the container's CSS:

#smedia-container {
 
 max-width: 302px;
 max-height: 110px;
 text-align: center;
 background-color: #fbf4e8;
  overflow:auto;
}
.smedia-header {
 background-color: #b90021;
 color: #000;
 min-height: 32px;
 
}
.smedia-icons {
 text-align: justify;
 width: 100%;
}
ul.smedia-icons li {
 float: left;
 display: inline-block;
 text-decoration: none;

}
.smedia-icons li a {
 text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>social media bar</title>
<link rel="stylesheet" type="text/css" href="smedia-bar.css">
</head>
<body>
<div id="smedia-container">
 <div class="smedia-header">
  <span>Social Media</span>
 </div>
 <span> Follow Us </span>
 <ul class="smedia-icons">
  <li><a href="#"><img src="some.png" alt=" "> </a> </li>
  <li><a href="#"><img src="some.png" alt=" "></a></li>
  <li><a href="#"><img src="some.png" alt=" "></a></li>
  <li><a href="#"><img src="some.png" alt=" "></a></li>
  <li><a href="#"><img src="some.png" alt=" "></a></li>
  <li><a href="#"><img src="some.png" alt=" "></a></li>
 </ul>
</div> <!--container-->
</body>
</html>
j08691
  • 204,283
  • 31
  • 260
  • 272
  • Thank you. Now that you mention it I remember reading something like that about floats. What is the difference between what you've suggested and what Oriol suggested? – web-dev Apr 03 '15 at 15:01
  • It's essentially the same solution. – j08691 Apr 03 '15 at 15:04
  • Thank you. Is a good practice to add these types of styles to a container? I'm trying to learn ho to properly structure css. – web-dev Apr 03 '15 at 15:05
0

This will work:

#smedia-container {
    overflow: auto;
    max-width: 302px;
    max-height: 110px;
    text-align: center;
    background-color: #fbf4e8;
}
Zheka
  • 32
  • 4