Home/ Questions/Q 879839
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T11:59:51+00:00

I was trying to get my div that contains floating elements, to enlarge to

  • 0

I was trying to get my div that contains floating elements, to enlarge to encompass them, but it doesn’t seem to pay attention to the padding of the elements, effectively chopping them off. How can I get the div to be the correct height for my list items?

html:

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

  <body>
    <div class="nav">
      <ul class="nav">
        <li class="nav"><a class="nav" href="#">One1</a></li>
        <li class="nav"><a class="nav" href="#">Two</a></li>
        <li class="nav"><a class="nav" href="#">Three</a></li>
        <li class="nav"><a class="nav" href="#">Four</a></li>
      </ul>
    </div>

    <div class="after"><h2>Heading</h2></div>
  </body>
</html>

css:

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  display: block;
  float: left;
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0;
}

a:hover.nav {
  background-color: gray;
}

div.nav {
  background-color: blue;
  overflow: hidden;
  width: 100%;
}

div.after {
  clear: left;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">
<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.

    • 0