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/
