problème IE: Div positionnement

Question

Je veux que ma page ressemble à ceci:

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

Dans la dernière version de FF et Chrome le ciselée ci-dessous fonctionne comme il se doit. Mais dans IE la sortie ressemble à ceci:

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

Mon ciselée

<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> 

J'apprécierais vraiment si vous pouviez me donner une solution sans modifier le balisage HTML.

Nous vous remercions de votre temps!

Andrew, Suisse

Answer 1

Ici, cela devrait fonctionner:

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

démonstration de travail:http://vidasp.net/tinydemos/layout.html

Answer 2

de nombreuses façons de résoudre. définir la largeur de l'emballage à 1000 px. aussi vous avez essayé float: left; sur #third? ..et peut-être un tutoriel comme cela vous aidera à: http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

Answer 3

Essayez ceci:

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

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

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

    } 

    #third 
    { 
     background: Red; 
     float: left; 

    } 
</style> 

Vous auriez à flotter le troisième div gauche et retirer le flotteur du deuxième div.

Vous ne devez modifier le code HTML, mais vous devrez réorganiser les divs:

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

Cela vous donnera l'ordre d'affichage que vous recherchez.

Answer 4

Que diriez-vous quelque chose comme ceci:

<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> 

Answer 5

Je ne sais pas quelle version de IE vous sont en train de tester mais cela rend correctement dans mon IE8. Lorsque je passe en mode standard IE7 à l'aide de la barre d'outils dev, j'obtiens le problème. Ceci peut être résolu avec ce css:

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

Vous devrez peut-être inclure dans un commentaire conditionnel que je ne suis pas sûr des effets sur les autres navigateurs. Voici an example de cela.