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?