Home/ Questions/Q 6837287
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T23:27:33+00:00

I have some html code that look like this sample here : <html> <body>

  • 0

I have some html code that look like this sample here :

<html>
  <body>
    <div id="A" style="float:right; Background-color: Red;">Alpha</div>
    <div id="B" style="margin-top: 20px; Background-color: Green;">Bravo</div>
  </body>
</html>

What I’d like to achieve is have the A div in the upper right corner and the B div aligned on the left 20 pixels from the top of the page. As you can see below, it does exactly what I want in IE8, but it doesn’t quite works in Chrome and Firefox.

enter image description here

Because it’s often the case, I suppose Chrome and FF are right to render it this way and IE8 is not following the standard. So my question is how can I get the desired result (What IE does in the SS) across all browser?

EDIT1&2: I edited the screenshot to show that I really want the Bravo div to be on the left of the Alpha div but 20px lower and not under it like it would if I simply add a clear: right on Bravo.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    EDIT
    Answer to the new question:

    <div id="A" style="float:right; background-color: Red; margin-top: -5px;">Alpha</div>
<div id="B" style="margin-top: 20px; background-color: Green;">Bravo</div>

    ORIGINAL
    (The question author originally asked this and later changed the question…)

    Add clear: right; into B div’s style. Optionally use clear: both;. And wrap div A into a wrapper div like this:

    <div id="wrapper" style="overflow: hidden;">
    <div id="A" style="float:right; background-color: Red;">Alpha</div>
</div>
<div id="B" style="margin-top: 50px; background-color: Green; clear: right;">Bravo</div>
    • 0