I'm trying to get the "Results" and "Page 1 of 2 << >>" text all on the same line in the image below:

Wrong layout

The code including CSS I've used is as follows:

<div id="resultsheading" style="background-color:#D6D6D6; font-weight:bold; font-size:larger;margin:10px 0px 5px 0px">
    <span>Results</span>
    <span style="float:right;position:relative;">
        <span>Page 1 of 2</span>
        <a href="javascript:PageLeft()"> << </a>
        <a href="javascript:PageRight()"> >> </a>
    </span>
</div>
<div id="schoolMap" style="width:360px; height:360px; float:right;position:relative"></div>
<div id="schoolSearchResults">
    Text on left of page
</div>

This works perfectly under Firefox and Chrome but not IE. The target browser is IE6 but it should be able to work on later versions as well.

Any ideas on what the problem is and how to fix it?

1 answer

o.k.w 2355
1
point
This was chosen as the best answer

This should work, by floating the paging DIV to the right:

<div id="resultsheading" style="background-color:#D6D6D6; font-weight:bold; font-size:larger;margin:10px 0px 5px 0px">
  <div style="float:right; text-align: right;">
    <span>Page 1 of 2</span>
    <a href="javascript:PageLeft()"> &lt;&lt; </a>
    <a href="javascript:PageRight()"> &gt;&gt; </a>
  </div>
  Results
</div>

Using SPAN instead of DIV will work too, I'm just more inclined to using DIV for block behaviour and layout purpose.

Tested on IE7/8/Quirk mode (IE6 should work too), FF3.6, Chrome

Answered about 9 years ago by o.k.w
  • Of course... I used that technique elsewhere in the CSS with divs but using spans must have confused me. Thanks for picking up the << >> also! Alex Angas about 9 years ago
  • Haha welcome, I'm a sucker for HTML Entities. :P o.k.w about 9 years ago