I need help with divs.

  • i’m still learning how to build my own theme.

    Here’s a picture of my problem:
    my problem

    as you’ve guessed, the spaces shouldn’t be there.

    here the stylesheet

    if i put a padding or border in the #post-content, the spaces disappear and i achieve what i want.

    my question is why? and is there any other way?

    and here’s the sort of a source if you need it.

    thanks in advance!

Viewing 6 replies - 1 through 6 (of 6 total)

  • There are minor imperfections in the CSS like

    border: 0px none;

    That might be it.

    A guess ….. WP adds <p> tags to the content and these will have the spaces as paragraphs should.
    Try adding “#post-content p” and experimenting with values ?

    Thread Starter c-ian

    (@c-ian)

    But the content is inside a div which is also inside another div which is positioned right at the bottom of the div above it.

    Thanks for the ideas. But I still can’t get why.

    It works fine if I add a padding.

    edit: It works fine in IE. It’s in Firefox where it’s now working.

    If its OK in IE there is something wrong with it ??

    In The Zen of CSS Design – Visual Enlightment for The Web on page 82 there is a discussion about collapsing margins and I think this fix will answer your question

    Quote;

    A somewhat obscure quirk of the CSS box model is someting called collapsing margins. This means that if two elements rest one on top of the other and they both have non-zero margins and no padding, borders, or other conditions mentioned, the total combined height of both margins will be to less than their sum. So 20px margins won’t add up to a 40px gap between elements a€?? instead each margin collapses into the other and you end up with a 20px gap.

    But what does this have to do with the gap problem? Collapsing affects parent and child elements equally; because the div have no vertical margins, each div’s bottom margin collapses into its last child paragraph’s bottom margin. But because the total margin value is not zero, the paragraph’s 10px margin still has to be honored. It pokes through the bottom of the containing div

    The problem is easy to fix once the diagnosis is made: When a slight 1px vertical padding value is applied to the divs themselves, the conditions for margin collapsing are no longer met and the gaps disappear:

    #yourDiv {
    background: #fff;
    margin: 0;
    padding: 1px 0;
    width: 350px;
    }

    HTH

    I don’t know what the original problem was, but I wonder how i can get my div expanding as the inner div does. I’ve tried quite many ‘solutions’, but nothing seems to happen. My posts are still stretching over the edge of the parent div.

    I’d be glad if somebody helped a newbie like me.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘I need help with divs.’ is closed to new replies.