CSS not working when using float

Question

Im new to Web Development and im trying to make a simple HTML site with minor css styling and a bit of PHP , im currently facing a problem with using CSS after using float: left on a div

.mid-bar {
  background-color: red;
}

.mid-bar li {
  float: left;
  list-style-type: none;
  margin-right: 5px;
  padding: 5px 2px;
}

<div class="mid-bar">
  <ul>
    <li>Hello There !</li>
  </ul>
</div>

This one DOES float to the left , but the background doesnt change

Any help would be appreciated

Thanks!

score 0 · Accepted Answer · answered Dec 16 '17 at 08:26

Parent elements having children as floating elements will loose the height, please use clearfix class, to know more read here

.mid-bar
{
    background-color: red;
}

.mid-bar li
{
    float: left;
    list-style-type: none;
    margin-right: 5px;
    padding: 5px 2px;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

<!doctype>
<html>
<head>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
    <div class="mid-bar clearfix">
        <ul>
            <li>Hello There !</li>
        </ul>
    </div>
</body>
</html>

Works like Charm ! Thanks for your help. – RedZ Dec 16 '17 at 10:55 — RedZ, Dec 16 '17 at 10:55

CSS not working when using float

1 Answers1