Home/ Questions/Q 6787567
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:22:54+00:00

I’ve cut a lot of code. The code needed is below. Here is a

  • 0

I’ve cut a lot of code. The code needed is below. Here is a small html-page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML >
<HEAD>

</HEAD>
<BODY>
<DIV style="border:1px solid #000;">
    <SPAN style="MARGIN-LEFT:20px;">
        Previous
    </SPAN>
    <SPAN style="FLOAT:right; MARGIN-RIGHT:20px;">
        Next
    </SPAN> 
</DIV>
</BODY>
</HTML>

All I want is to display previous and next on the same line. It looks one below another in IE7, but OK in FF and Opera. Chrome was not tested yet. Also, when I remove
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">,
then Opera displays that two words not in one line as well.
All I want is to display the word “Previous” to the left and “Next” to the right within div and in one line.

What’s the best way to fix it?
Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Okay, I do not have all of those browsers in front of me at the moment but you could likely clear up the issue by adding float: left to the first span. Also, I would assume that some of your other code takes care of this, but for your small sample here are a few additional styles you may need:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML >
<HEAD>
</HEAD>
<BODY>
<DIV style="border:1px solid #000; overflow: hidden; width: 100%;">
    <SPAN style="clear: left; FLOAT:left; MARGIN-LEFT:20px;">
        Previous
    </SPAN>
    <SPAN style="clear: right; FLOAT:right; MARGIN-RIGHT:20px;">
        Next
    </SPAN> 
</DIV>
</BODY>
</HTML>

    Not that we have set a width and overflow value on the containing div. The clear value is not important in most use cases. You can use different width and overflow values (for example, 50% and auto) as appropriate.

    For more information and some additional tweaks you may have to make, see this article. If I had a copy of IE7 handy I would test it out for you but you should be close.

    From the article:

    The use of a width or height declaration is required to make the
    effect work in Explorer Windows and Opera. If you don’t include it
    Explorer Windows continues to show the border at the top of the
    columns, as if there were no overflow. Opera completely hides the
    content of the container.

    • 0