IE problem: Div positioning

I want my page to look like this:

+------+------+
|first |third |
|      |      |
+------+------+
|second|     
|      |      
+------+   

In the latest version of FF and Chrome the snipped below works as it should. But in IE the output looks like this:

+------+
|first | 
|      |    
+------+------+
|second| third|    
|      |      |
+------+------+   

My snipped

 <style>
    #wrapper
    {
        width: 680px;
    }

    #first
    {
        background:开发者_运维百科 Red;
        float: left;
        width: 500px;
    }

    #second
    {
        background: Green;
        float: left;
        width: 500px;
    }

    #third
    {
        background: Red;
    }
</style>
<div id="wrapper">
    <!-- 1st two Divs-->
    <div id="first">Div ONE</div>
    <div id="second">Div TWO</div>
    <!-- 3rd Div should be on the top right side next to div one -->
    <div id="third">Div Three</div>
</div>

I would really appreciate it if you could give me a solution without altering the html markup.

Thank you for your Time!

Andrew, Switzerland

Try this:

<style>
    #wrapper
    {
        width: 680px;
    }

    #first
    {
        background: Red;
        float: left;
        width: 500px;
    }

    #second
    {
        background: Green;
         width: 500px;

    }

    #third
    {
        background: Red;
        float: left;

    }
</style>

You'd have to float the third div left, and remove the float from the second div.

You won't have to edit the html, but will have to re-order the divs:

<div id="wrapper">
    <div id="first">Div ONE</div>
    <div id="third">Div Three</div>
    <div id="second">Div TWO</div>
</div>

That will give you the order of display you're looking for.

Here, this should work:

#wrap { width:800px; position:relative; }
#first, #second, #third { width:400px; height:400px; }
#third { position:absolute; top:0; right:0; }

Working demo: http://vidasp.net/tinydemos/layout.html

many ways to solve. set wrapper width to 1000px. also you've tried float: left; on #third? ..and possibly a tutorial like this will help you: http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

How about something like this:

<style>
    #wrapper
    {
        width: 680px;
    }

    #first-second-wrapper {
        float: left;
        width: 500px;
    }

    #first
    {
        background: Red;
    }

    #second
    {
        background: Green;
    }

    #third
    {
        background: Red;
        margin-left: 500px;
    }
</style>
<div id="wrapper">
    <!-- 1st two Divs-->
    <div id="first-second-wrapper">
       <div id="first">Div ONE</div>
       <div id="second">Div TWO</div>
    </div>
    <!-- 3rd Div should be on the top right side next to div one -->
    <div id="third">Div Three</div>
</div>

I'm not sure which version of IE you are testing but this renders correctly in my IE8. When I switch to IE7 standards mode using the dev toolbar I get the problem. This can be solved with this css:

#second
    {
        background: Green;
        float: left;
        width: 500px;
        clear:both;
    }

You may need to include this in a conditional comment as I am unsure of the effects on other browsers. Here is an example of this.