ansaurus

Question

Div with overflow: hidden doesn't clear padding of floating unordered list

Answer 1

+1 A:

If you're talking about vertical padding, an anchor is an inline element and doesn't have vertical dimensions. Just set a.nav{display:inline-block;} and you should get some vertical padding.

edl 2010-06-18 21:21:12

Answer 2

+1 A:

I'm not sure if overflow:hidden works on floated grandchildren. I would suggest removing the display:inline on the ul (is there a specific reason it´s there?) and setting the overflow:hidden on the ul instead of on the div.

Making the ul and inline element with floated block level elements in it is bound to lead to problems as I don´t think that´s valid.

By the way, there really is no need to give all elements a class; if the containing div has a class already, you can target its children like:

.nav ul {
}
.nav li {
}
// etc.

jeroen 2010-06-18 21:32:07

Thanks for the class tip, I'd forgotten about that.

Curyous 2010-06-18 22:15:04

Answer 3

+1 A:

I'm going in the same direction edl is: a, as an inline element, does not have vertical padding.

However, IE up to IE 7 does not work well with display: inline-block (see http://www.quirksmode.org/css/display.html), so I recommend you set your links to display: block. Your list items are already floated, so it doesn't make a difference.

On a related note, I would also recommend you change your markup and stylesheet for clarity and readability:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
  <head>
    <title>Title</title> 

    <link type="text/css" rel="stylesheet" href="/stylesheets/test.css">
  </head>

  <body>
    <ul id="nav">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
    </ul>

    <h2>Heading</h2>
  </body>
</html>

and

#nav {
  background-color: blue;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

#nav li {
  background-color: red;
  float: left;
}

#nav li a {
  background-color: green;
  display: block;
  padding: 10px;
}

#nav li a:hover {
  background-color: gray;
}

Not every element needs to have a class, and using the same name for different purposes based on their tags will just induce a lot of headache later on. Just give the main element an ID and have your rules originate from there.

That way, you can also get rid of unnecessary divs, simplifying your markup.

dhabersack 2010-06-18 21:42:33

ansaurus

tags:

views:

answers:

Div with overflow: hidden doesn't clear padding of floating unordered list

related questions