CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

List item not conforming to padding

I am new to html and CSS but I am having an issue where my padding doesn't seem to affect my list item. What I am referring is the top right "post" box seen here:

http://jsfiddle.net/GYcAg/2/embedded/result/

The header has this code:

#header { background-color: orange; height: 60px; line-height: 60px; padding:0px 50px; }

My question is, why is this not indented 50px to the left like it seemingly should be?

Upvotes: 0

Views: 91

Answers (3)

dsgriffin
dsgriffin

Reputation: 68596

You'll notice that your list item has a red background-color, whereas the code you think relates to it (what you've posted here) has a background-color of orange.

Your post box is an element inside the #header element, not the #header element itself.

You want to target the ul descendant of the #header:

#header ul { 
  list-style: none; 
  float:right; 
  top: 0; 
  right:50px; /* <- Change this from 0 to 50px */
}

jsFiddle here.

Upvotes: 2

edd
edd

Reputation: 1364

Try this

#header ul {
    list-style: none outside none;
    position: absolute;
    right: 50px;
    top: 0;
}

//right 0 will skip everything

Upvotes: 3

2ne
2ne

Reputation: 5986

It is because the #header ul is position absolute. This means that it will ignore its parents padding.

This should fix it

#header ul {
   float: right;
   list-style: none outside none;
   position: relative;
}

Upvotes: 3

Related Questions