Thanks David That's really useful information, as well as a fix that's saved me hours of hitting my head on the keyboard.
Paul On 10 March 2010 18:24, David Laakso <[email protected]> wrote: > Paul Jinks wrote: >> I have a two column layout with each column divided into two boxes >> (thus a kind of faux table). This is for navigation and each box >> contains a definition list, the dl's in the right column being floated >> right: >> http://www.librarydevelopment.group.shef.ac.uk/sandpit/columns.html >> >> CSS looks like this: >> #wrap { >> margin:auto; >> width: 800px; >> } >> >> #rightcol { >> width: 400px; >> float: right; >> } >> >> #leftcol { >> width: 400px; >> } >> >> As you can see, everything is more or less OK except that the bottom >> box in the left-hand column is about 13px below the bottom box in the >> right-hand column. >> >> While showing this to a colleague, i put a border on the bottom right >> hand box for emphasis and... the gap disappeared: >> http://www.librarydevelopment.group.shef.ac.uk/sandpit/columns-border.html >> (in FF3, IE8 and Opera) >> >> I'd be really grateful for an explanation - and a solution. >> >> Paul Jinks >> > > > > The explanation is margin collapsing. > <http://www.w3.org/TR/CSS2/box.html#collapsing-margins> > <http://complexspiral.com/publications/uncollapsing-margins/> > The fix is: > #col2 #bottom { > /*border: solid red 1px;*/ > padding-top: 1px; > } > > Best, > ~d > > > > > -- > desktop > http://chelseacreekstudio.com/ > mobile > http://chelseacreekstudio.mobi/ > > ______________________________________________________________________ > css-discuss [[email protected]] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
