CODEWITHSUNDEEP
htmlcss
Leem.fin
Leem.fin

Reputation: 42622

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

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?

Upvotes: 5

Views: 14956

Answers (3)

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 1

Allan Kimmer Jensen
Allan Kimmer Jensen

Reputation: 4389

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?

Upvotes: 2

Andreas Eriksson
Andreas Eriksson

Reputation: 9027

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!

Upvotes: 2

Related Questions