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

I was trying to include floating elements in my div so that they could be expanded to enclose, but It does not pay attention to the padding of elements, effectively cut them off.

  & lt; Html & gt; How do I get the right height for my list items?  & lt; Top & gt; & Lt; Link type = "text / css" rel = "stylesheet" href = "/ stylesheets / test.css" /> & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "nav" & gt; & Lt; Ul class = "nav" & gt; & Lt; Li class = "new" & gt; & Lt; One class = "now" href = "#" & gt; One 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "new" & gt; & Lt; One class = "ava" href = "#" & gt; Two & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "new" & gt; & Lt; One class = "ava" href = "#" & gt; Three & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "new" & gt; & Lt; One class = "ava" href = "#" & gt; Four & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "after" & gt; & Lt; H2 & gt; Heading & lt; / H2 & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

CSS:

  ul.nav, ul li.nav {display: inline; Margin: 0 px; Padding: 0 pixels; } Ul.nav {list-style-type: none; } Li.nav {display: block; Swim left; Background color: red; } A.nav {background color: green; Padding: 10px; Margin: 0; } A: hover.nav {background-color: gray; } Div.nav {background color: blue; Hidden flurry; Width: 100%; } Div.after {clear: left; } <   
 
 
 I'm going to go in the same direction:  a < / Code>, as inline element, there is no vertical padding. 
 
 However, till IE 7, IE does not work well with  display: inline-block  (see), so I suggest you link your links to  Display: Block . Your list items have already been released, so it does not matter. 
 
 On the related note, I suggest you change your markup and stylesheet for clarity and readability: 
 
   
 
 and 
 
  #nav {background color: blue; List-style-type: none; Margin: 0; Hidden flurry; Padding: 0; Width: 100%; } # Nav li {background color: red; Swim left; } # Nav li a {background color: green; Display area; Padding: 10px; } # Nav li a: hover {background-color: gray; }  
 
 Not every element requires a class, and depending on your tags, using the same name for different purposes will cause a lot of headache later on. Just give an element an ID and your rules are generated from here. 
 
 In this way, you can get rid of unnecessary  div , make your markup easier.