CODEWITHSUNDEEP
htmlcssmargin
dave
dave

Reputation: 15459

why is the inner div top margin bringing it's wrapper div top margin along with it

<body> 
<div id = "wrapper">
    <div id = "video">
    </div>
</div>
<div id = "footer">
    <div id = "footercontent">
    </div>
</div>
</body>

*
{
margin:     0px;
padding:    0px;
}

.selfclear:after 
{
    content:                "."; 
float:                  left;
    display:                block;
    height:                 0;
    clear:                  both;   
    visibility:             hidden;
} 

html, body 
{
height: 100%;
}

#wrapper    
{
min-height:         100%;
height:             auto !important;
height:             100%;
margin:             0 auto -343px; /* the bottom margin is the negative value of the footer's height */
width:              100%;
background:         url( "images/landing_page_bg.png" );
}

#video
{
    width:              940px;
    height:             530px;
    background:         black; 
    margin-left:        auto;
    margin-right:       auto;
    margin-top:     100px;
}

#footer  
{
height:             343px; /* .push must be the same height as .footer */ 
background:         url( "images/Landing_page_Footer.png" )no-repeat;
background-size:    100%;
background-color:   black;    
width:              100%;
}
#footercontent
{ 
    height:         100%;

    width:          1920px;
    margin-left:    auto;
    margin-right:   auto;
}

Upvotes: 1

Views: 246

Answers (1)

Joe Conlin
Joe Conlin

Reputation: 5994

I'm not sure that I understand your question but there are a couple of things that you should address first.

First, you should use a css reset before setting any styles. Eric Myers' Reset is probably the most commonly used, in one form or another.

Second, your formatting is wrong and that can cause strange issues by itself.

Here is the cleaned up code with a minimal reset:

<body> 
    <div id="wrapper">
        <div id="video">
        </div>
    </div>
    <div id="footer">
        <div id="footercontent">
        </div>
    </div>
</body>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video 
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

* {-webkit-font-smoothing: subpixel-antialiased !important; text-rendering:optimizeLegibility;}    
html {height:100%;}


.selfclear:after { /* not sure what this is being used for */
    content: ".";
    float: left;
    display: block;
    height: 0;
    clear: both;   
    visibility: hidden;
    }

#wrapper {
    width: 100%;
    height: auto !important;
    margin-bottom: -343px; /* the bottom margin is the negative value of the footer's height */ 
    /* Are you wanting for the footer to be pulled up and overlap your wrapper DIV? */
    background: url('images/landing_page_bg.png') no-repeat 0 0;
    }

#video {
    width: 940px;
    height: 530px;
    margin: 100px auto 0 auto; /* You can include all margins in a shorthand statement ~ TOP RIGHT BOTTOM LEFT */
    background: black;
    }

#footer {
    width: 100%;
    height: 343px; /* .push must be the same height as .footer */
    background: url('images/Landing_page_Footer.png') no-repeat 0 0;
    /* background-size is NOT VALID or needed. Set the size of the container and repeat or no-repeat accordingly - background-size: 100%; */
    background-color: black;    
    }

#footercontent {
    width: 1920px;
    height: 100%;
    margin:0 auto; /* shorthand again TOP/BOTTOM LEFT/RIGHT */
    }

Upvotes: 1

Related Questions