understanding when margin works and doesn't work 1

[1DMF]

I have a div, fixed width, margin:0 auto, so it's centered against its parent div, bordered, very nice!

I have a <ul> within this div, however when i place margin: 0 auto; on the <ul> it still aligns hard left against the div.

are there some elements which you cannot apply certain attributes to because they have no effect.

Also why does a <p> tag expand its parent <div> tag?

The div (the pretty one explained above) has a fixed width, below the <ul> i'm trying to center is some text in a <p> tag, all this <p> has on it is text-align:center; but it is expanding its parent tag to the width of the containing div and NOT the fixed width I have given it.

why is the <p> tag doing this to it's parent div, shouldn't the <p> only have a width of it's containing parent div?

thanks 1DMF.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

ok I worked out the <p> problem, it's inherited!

why is that? I have the following....

<div class="div1">
  <p>text</p>
  <div class="div2">
    <ul>
      <li>list1</li>
    </ul>
    <p>more text</p>
  </div>
</div>

div1 class has .div1 p {width:xyz;}

div2 class has .div2 {width:abc; margin: 0 auto;}

why does .div2 p have the same width and not the width of .div2 ?

surely that <p> tag is of class .div2 p { } not .div1 p { }

and how do I get the <ul> to center as .div2 ul {margin: 0 auto;} doesnt work?




"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Ok, first things first.

1. Why is my UL left aligned even though I have margin: 0 auto? Because unless specified, ul is (just like div) 100% wide. So left and right margins, being auto, have only 0% percent to work with. This is sometimes hard to understand, but that's how it works. You could try giving your ul a width of auto, if that does not help, just fix its width. In the future, try giving all your elements (different) backgrounds or borders (I prefer backgrounds because they don't mess with the size of the element) and see how far they actually expand and not how far you expect them to.

2. Why did my P inherit the value? It didn't. Width is not inherited, it is just defaulted for every element. However, your declaration:

.div1 p {width:xyz;}

states that any paragraph (<p>) that is a descendant of an element with a class of .div1 will have this width. Looking at your html, both your paragraph are indeed descendants of your .div1. What you would need is a child selector instead of the descendant: [tt].div > p { width: xyz; }[/tt]. Problem with that? Your favourite, IE, does not support it. So, until then, you will need to define everything twice or work out another way. Note however, that you can do this:

.div1 p { width: 100px; } /* every paragraph within this div will be 100px wide */
.div1 .div2 p { width: 50px; } /* however every paragraph that is additionaly within .div2 will be only 50px wide */

Hope that explains it.

 

[1DMF]

excellent, thanks, makes perfect sense for once, and if i can understand what your saying Vragabond, i must be getting better at this CSS milarkey

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

I've also found that margin doesn't work in I.E. for absolute positioned elements, there is no way of centering these in IE that I have found using margin: 0 auto;

has anyone managed this ?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.