HTML CSS: odd behavior that I can't understand, extra space disapperars when adding a border

Question

css/hmtl newbie here. I've been messing with divs and I'm getting some odd behavior that I can't figure out/explain. I'm getting extra space below the 'more' link, when it should be centered on the y-axis.

This is the code:

#show-rec-box {
    clear: both;
    width: 100%;
    height: 286px;
    border-bottom: 1px solid #ececec;  

}

but when I change it to this, the extra space disappears!

#show-rec-box {
    clear: both;
    width: 100%;
    height: 286px;
    border-bottom: 1px solid #ececec; 
    border: 1px solid #911; 
}

entire code w/o extra border: http://jsfiddle.net/8q3Ca/ code with extra border: http://jsfiddle.net/8q3Ca/1/ any ideas what's happening?? thanks a lot!

score 0 · Accepted Answer · edited May 23 '17 at 10:34

0

You have margin-top on #rec-title. It's margin collapse - http://www.w3.org/TR/CSS2/box.html#collapsing-margins Try use 'overflow:auto' for a parent block . Similar question Child elements with margins within DIVs

http://jsfiddle.net/fliptheweb/8q3Ca/2/

edited May 23 '17 at 10:34

Community

1
1

answered Nov 16 '11 at 00:24

fliptheweb

1,168
1
6
14

Thanks for the help. I'm confused however about the rec-title margin being a problem, when I remove the rec-title margins to see the effect, the problem with the extra space below 'more' is still there. Could you explain why the content of the div#show-rec-box is overflowing and would need 'overflow: hidden;'? Thanks a lot – trying_hal9000 Nov 16 '11 at 00:38
@trying_hal9000 i added link to w3c spec and similar question - "There are a few ways to get around it. If you float the divs, they will contain the margins of child elements and prevent margin collapsing. Another approach is to add a border or padding to the divs." – fliptheweb Nov 16 '11 at 00:45

score 0 · Answer 2 · answered Nov 16 '11 at 00:25

Replace #main, #show-rec-box, and #rec-wrap with the following css.. Is this something you want to achieve?

#main {
    border: solid 1px #ececec;
    width: 793px;
    float: left;
}


#show-rec-box {
    clear: both;
    width: 100%;
    height: 286px;
}

#rec-wrap {
    margin: 0px 27px 0px 28px;
    height: 100%;
    overflow: hidden;
    float: left;
}

HTML CSS: odd behavior that I can't understand, extra space disapperars when adding a border

2 Answers2