On 22/6/07 03:23, "Gpalz" <[EMAIL PROTECTED]> wrote: > The nested "content" div basically pulls the "wrapper" div downward, > causing a gap. > > Background: > > The "wrapper" div has a width of 800px, contains a background image and > is flush against the top browser window. This is how the "wrapper" div > should look: > > Now,the nested "content" div has a width of 700px and a top margin of > 40px to create some space. For some reason, the "wrapper" div gets > pulled downward and is no longer flush with the top. Not good. > > Accidental Solution?: > > I discovered if I added a border to the wrapper, it pushes the wrapper > up (what?!!) where it should be (flush with the top):
The margin-top is coming out of the container DIV and pushing them both down. The solution is to use padding on the container: padding-top: 40px; which causes the desired effect without pushing both down. This is because of the top-margin calculation in the spec: > The top margin of an in-flow block-level element is adjoining to its first > in-flow block-level child's top margin if the element has no top border, no > top padding, and the child has no clearance. From: http://www.w3.org/TR/CSS21/box.html#collapsing-margins ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
