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; }

--------------Solutions-------------

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 */
}

Category:html Time:2011-08-05 Views:0
Tags: html css margin

Related post

  • Div in lower left corner of wrapper div 2009-12-17

    I have a page with a wrapper div which contains a background image and all the content divs. In this wrapper div I also have a logo div which should be placed at the bottom left corner of the wrapper without interfering with the contents. I have mana

  • how can i mantain a wrapper div height auto? 2010-11-24

    <style> body{ background:#FF9900; color:#FFFFFF; } .wrapper{ width:900px; height:auto; padding:0px; margin:auto; background:#000000; } .header{ width:900px; height:50px; float:left; padding:0px; margin:0px; } .body_content{ width:900px; height:

  • Allign column of DIV blocks from aside of an other DIV block 2010-11-26

    I want to allign div block in such maner: +-----+------+ |first|second| | | | + +------+ | |third | | | | +-----+------+ But the following code allign it in other manner: <html> <head> <style> .common { border: 1px solid black; floa

  • How to center a wrapper-div and not the content 2012-01-02

    I want my page to always be centered in the browser without affecting the content( like align-text: center; does). I want to center my wrapper-div.. How do I do this? Simplifed existing page: <div id="wrapper"> <div id="header"> Music Hea

  • Drupal views: how to put a wrapper div for two views? 2010-07-30

    I have two views in a Drupal page with the following structure: <div> <div>Some content</div> <div> View 1 </div> <div> View 2 </div> </div> Now I want a wrapper div covering the two views: <div>

  • Table coming on the Top of Div .how to bring the Table down 2010-07-28

    I have a div in the html and after the Div and i have another div which contains the HTml table Which is coming on the top of div .How to bring the table down . <div id='testupdate2' >Mynumber: ". $num." </div> <div id="test"> <t

  • How this float div is getting top margin when wrapper div has no border? 2012-02-17

    Please note that I am not asking about correcting the problem but instead I want to know how floated div is getting margin when wrapper div has 0px border set. But when wrapper div has 1px border set then floated div doesn't get margin but in both ca

  • Why is the wrapper div getting the top margin applied when applying to its child div? 2011-03-31

    Here is an example html: <div id = "wrapper"> <div id = "content"> </div> </div> here is the CSS: #wrapper { width: 1000px; min-height: 850px; border: 1px solid; } #content { height: 450px; float: left; margin: 50px 0px 0px 0p

  • Collapsing margin on an absolutely positioned div? 2010-11-29

    I have 4 div's total: 1 container 1 submenu 1 content 1 sidebar They are set up as so: <container> <submenu></submenu> <content></content> <sidebar></sidebar> </container> The container has position:rel

  • Margin issue with a wrapping DIV 2011-04-09

    I am trying to wrap a div called content with another div that has a different background. However, when using "margin-top" with the content div, it seems like the wrapping DIV gets the margin-top instead of the content div. Code: <!DOCTYPE html

  • HTML: I want to create a DIV thats horizontal centered and reaches from the top to the bottom 2011-06-30

    I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not

  • Margin collapse after relative positioned div 2011-12-30

    Short story: my footer doesn't react to margin-top, i've tried many various way (well it actualy works on very big numbers, which shows that margin is led from previous element, the image container).Here's the code: HTML (i've removed content obiviou

  • How can a div inside a full width div have constant margin, regardless of the outer div size? 2012-01-11

    I have <div id="1"><div id="2"></div></div> div#1 comes right after the body and has a width of 100% when i give div#2 margin:10px the it is pushed outside the screen How can I give div#2 a constant padding from the edges of t

  • Using margin on wrap list won't work. margin: top is always 0 2013-05-29

    http://jsfiddle.net/MqPDH/10/ Why does the 1st wrap .wp-list margin: 10px and .a .b use margin: 10px not work? .wp{ background-color: blue; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; width: 450px; } .wp_list{ backgr

  • Fill a div with Items using float left and a left margin 2011-04-13

    I have a div of 960px that i want to fill with five items using a float left. Currently I am separating each item with a 10px right margin but this leaves me with a 10px space at the right of my container div. My question is how can I fill the div co

  • Retrieving top and left offset of a div in jQuery 2011-10-18

    To get the top and left of the current div onclick have this. <div class="channel" onclick="highlight_channel();"> <p>Pax TV, 8am (Lima, Peru, in Spanish)</p> </div> function highlight_channel() { var highlight_top = $(this).p

  • Set margin between two tabel-cell div 2011-12-13

    I have two buttons, and because I need them display in one line and vertical align text in it, I use display: table-cell. But the two div stick together. Margin does not work here. Is there a way to separate them? Code is here: http://jsfiddle.net/sy

  • Bring VB.Net window on top of all windows 2011-12-17

    I have a window which should stay on top of Power point slide shows. So it should be on top of all the windows. I did this easily using VB 6 using Lib "user32", but it seems to be difficut with VB.net. Me.TopMost = True This does not seem to work as

  • How to stop a margin resizing after resizing a div 2012-01-08

    I have created a div with an image inside. When clicked it resizes the div and places a larger image in. The side effect of this seems to be that the wrapper div moves a little to the left. I have tried a few things but here is the code. Hope you can

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 0.636 (s). 13 q(s)