0

I have this code:

div#navigation a {
  display: block;
  padding: 7px 12px;
  font-size: 18px;
}
div#navigation ul {
  list-style: none;
  margin: 0px auto;
}
div#navigation ul li {
  float: left;
  min-width: 50px;
  text-align: center;
  min-height: 30px;
}
div#navigation {
  overflow: hidden;
}
<div id="navigation">
  <ul>
    <li>
      <a href="/">Start</a>
    </li>
    <li>
      <a href="">Test 1</a>
    </li>
    <li>
      <a href="">Test 2</a>
    </li>
    <li>
      <a href="">Test 3</a>
    </li>
  </ul>
</div>

What happens is that the <ul> does not have any height, even though its list elements have some height. And clear does not solve the problem. I had the same problem with the <div id="navigation">, but the last command solved the problem. Unfortunately this does not seem to work with <ul>.

Could somebody explain me why this happens and how to avoid it?

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
  • Must be missing something because the `ul` *does* have a height. [Test](https://jsfiddle.net/v1k7p387/). – Steven B. Aug 26 '16 at 20:21
  • Cannot reproduce from your given code, but try `overflow: hidden;` (which is a _rule_, not a “command”) on the `ul` selector. You say _“Unfortunately this does not seem to work with `
      `”_, but I don’t see that you have actually tried that.
     – Sebastian Simon Aug 26 '16 at 20:26
  • Actually, `overflow:hidden` is a property-value pair...not a rule. The selector *plus* the property-value pair constitute a rule...but you're basically there. – Paulie_D Aug 26 '16 at 21:09
  • Why not just change `div#navigation ul li... float: left` to: `display:inline-block` !? Without clear, before, after etc... – Jacek Szymański Aug 26 '16 at 21:10

2 Answers2

0

Here is a working update of your snippet using the solution from How do you keep parents of floated elements from collapsing?.

Just add this to your code:

div#navigation ul:after {
      content: " ";
      display: block; 
      height: 0; 
      clear: both;
    }


div#navigation a {
  display: block;
  padding: 7px 12px;
  font-size: 18px;
}
div#navigation ul {
  list-style: none;
  margin: 0px auto;
  background: red;
}
div#navigation ul:after {
  content: " ";
  display: block; 
  height: 0; 
  clear: both;
}
div#navigation ul li {
  float: left;
  min-width: 50px;
  text-align: center;
  min-height: 30px;
}
div#navigation {
  overflow: hidden;
}
<div id="navigation">
  <ul>
    <li>
      <a href="/">Start</a>
    </li>
    <li>
      <a href="">Test 1</a>
    </li>
    <li>
      <a href="">Test 2</a>
    </li>
    <li>
      <a href="">Test 3</a>
    </li>
  </ul>
</div>
Community
  • 1
  • 1
Shnibble
  • 110
  • 1
  • 10
-1

If you are using Bootstrab as your base, you can add the class clearfix in your ul. If not, just create a class clearfix with these parameters:

.clearfix:after, .clearfix:before {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

Or just click here.

https://fiddle.jshell.net/6L1kxhhf/

:)

Claudio Bonfati
  • 493
  • 3
  • 14