In trying to solve a simar issue with my course format 'topcoll' for Moodle 2 - as I have had to reapply my changes to the topic format's format.php and use, so I found a website:

http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

After a bit of testing, realising that the web browser needed something more to push everything to the right to fill width for the <li> container, so I added:

echo '<div style="clear: both; margin: 0;height: 0px;"></div>';

just after the <li> and just before the </li> in format.php, around lines 178 and 245 respectively in version 1.102

e.g:

echo '<li id="section-'.$section.'" class="section main'.$sectionstyle.'" >'; //'<div class="left side"> </div>';

echo '<div style="clear: both; margin: 0;height: 0px;"></div>';
echo '<div class="left side">'.$currenttext.$section.'</div>';
// Note, 'right side' is BEFORE content.

and

if ($PAGE->user_is_editing()) { print_section_add_menus($course, $section, $modnames); }
}

echo '</div>';
echo '<div style="clear: both; margin: 0;height: 0px;"></div>';
echo "</li>\n";

respectivly.

I have tested on Firefox 3.5.2 and IE 8 - on which compatibility mode shows more space, but could it be a possible part solution which could then be fully put in css to make the code shorter?

Cheers,

Gareth

Working on the similar issue with my format, I have been able to sort things out from the information found on:

http://css-tricks.com/all-about-floats/
&
http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/

Where I then implement the following css:

li.section:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

li.section {
display: inline-block;
padding: 0 0;
width: 100%;
}
/* start commented backslash hack */

• html li.section { height: 1%; }
  li.section {
  display: block;
  width: 100%;
  }
  /* close commented backslash hack */

Which gets a near perfect solution.

I hope this helps,

Cheers,

Gareth