div css margins broken when no padding is applied

Discussion in 'HTML' started by Andrew Crowe, Dec 13, 2003.

  1. Andrew Crowe

    Andrew Crowe Guest

    Hi guys,

    I've come across a strange problem while using divs/css to create a page
    layout (on an xhtml 1.0 transitional page)

    I'm using two nested divs to create a kind of border style (I want a
    patterened border so I can't just use border styles)

    <div id="box-border"><div id="box-inner">
    <p>Content</p>
    </div></div>


    If I use the following CSS the outer div works fine but the inner div
    has incorrect margins (the top and bottoms crash and the content in
    box-inner is all over the place):

    #box-border{
    margin:64px;
    background-color:red;
    }
    #box-inner{
    margin:4px;
    background-color:blue;
    }


    That fails in both mozilla and explorer (although they both look different)


    however, if I add padding:1px; (or more) to both divs suddenly they
    display fine. why does adding a padding value affect how the margins are
    displayed? Is there some block mode rule in effect?


    Thanks

    Andrew
    Andrew Crowe, Dec 13, 2003
    #1
    1. Advertising

  2. Andrew Crowe

    brucie Guest

    in post <news:0VtCb.634$>
    Andrew Crowe said:

    > I've come across a strange problem while using divs/css to create a page
    > layout (on an xhtml 1.0 transitional page)


    and the URL would be?


    --
    brucie
    13/December/2003 07:54:07 pm kilo
    brucie, Dec 13, 2003
    #2
    1. Advertising

  3. Andrew Crowe

    Steve Pugh Guest

    Andrew Crowe <> wrote:

    >I'm using two nested divs to create a kind of border style (I want a
    >patterened border so I can't just use border styles)


    I don't see any patterned border from the styles you've quoted, all I
    see is a 4px red border around a blue content area.

    margin: 64px;
    border: 4px solid red;
    background-color: blue;

    would acheive exactly the same result with less code and no collapsing
    margins problem.

    ><div id="box-border"><div id="box-inner">
    ><p>Content</p>
    ></div></div>
    >
    >If I use the following CSS the outer div works fine but the inner div
    >has incorrect margins (the top and bottoms crash and the content in
    >box-inner is all over the place):
    >
    >#box-border{
    > margin:64px;
    > background-color:red;
    >}
    >#box-inner{
    > margin:4px;
    > background-color:blue;
    >}
    >
    >That fails in both mozilla and explorer (although they both look different)
    >
    >however, if I add padding:1px; (or more) to both divs suddenly they
    >display fine. why does adding a padding value affect how the margins are
    >displayed? Is there some block mode rule in effect?


    As per the CSS spec adjacent vertical margins collapse. You need
    padding or a border between them to prevent this.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Dec 13, 2003
    #3
  4. Andrew Crowe

    Andrew Crowe Guest

    Steve Pugh wrote:

    > I don't see any patterned border from the styles you've quoted, all I
    > see is a 4px red border around a blue content area.


    Yeah, I know, that was just a simple example to illustrate my point (no
    point pasting in the whole code as it looked the same without the extra
    stuff)

    > As per the CSS spec adjacent vertical margins collapse. You need
    > padding or a border between them to prevent this.


    Ah that must be why.

    Anyway in light of that I've changed it to use a mix of padding and
    margins (I was hoping for some simpler code, but this isn't too bad I
    guess).



    Thanks

    Andrew
    Andrew Crowe, Dec 13, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Owen Jacobson

    Re: div margins?

    Owen Jacobson, Sep 1, 2003, in forum: HTML
    Replies:
    2
    Views:
    498
    Owen Jacobson
    Sep 10, 2003
  2. Joe

    CSS Margins in Opera

    Joe, Feb 4, 2004, in forum: HTML
    Replies:
    3
    Views:
    822
    Leif K-Brooks
    Feb 4, 2004
  3. Chris Beall
    Replies:
    6
    Views:
    630
    Chris Beall
    Apr 22, 2004
  4. Michael Laplante

    Margins versus padding

    Michael Laplante, May 5, 2006, in forum: HTML
    Replies:
    12
    Views:
    794
    Michael Laplante
    May 5, 2006
  5. Mike Barnard

    Padding / margins. PX or EM?

    Mike Barnard, Mar 20, 2008, in forum: HTML
    Replies:
    7
    Views:
    13,839
    Mike Barnard
    Mar 20, 2008
Loading...

Share This Page