Why padding-left does not work in my simple case? - html

Question

I have a very simple layout, just two un-ordered list by using <ul><li>, with each of them inside a <div> .
<div id="main">
<div id="fist-list">
<ul id="colors">
<li id="white">White</li>
<li id="green">Green</li>
</ul>
</div>
<div id="second-list">
<ul id="numbers">
<li id="one">One</li>
<li id="two">Two</li>
</ul>
</div>
</div>
li{
float: left;
width: 30px;
}
#second-list{
padding-left:30px;
}
you can check my simple code here .
I tried to use CSS padding-left to seperate the two list 30px away from each other, but my CSS does not work, why?

Answer 1

If you still want the float at the li
You can float the list left, then it will work.
like this:
#second-list{
padding-left:30px;
float:left
}
Still I would make it another way, but I need to see what you want to achieve. Do you have a picture of it?

Answer 2

There's several problems here:
You're using Float, which destroys the layout
Div's are block-level elements, and thus will always break the line.
Simply remove the float, and make the divs inline-blocks, like so:
http://jsfiddle.net/a8dy6/12/
good luck!

Answer 3

write overflow:hidden in you div to clear because it child's float
div{overflow:hidden}
#second-list, #fist-list{float:left}
check this http://jsfiddle.net/sandeep/a8dy6/18/
Edit: as per you comment below
li{clear:left;}
check this http://jsfiddle.net/sandeep/a8dy6/19/
EDIT:
Reason: actually the #second-list takes the padding
if you define an element an float then you have to clear it parent otherwise parent collapse.
check this when didn't clear the parent http://jsfiddle.net/sandeep/a8dy6/22/
So; you have to clear it's parent when the child have float.
check this after clear parent http://jsfiddle.net/sandeep/a8dy6/23/