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
______________________________________________________________________
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/
