IE проблема: позиционирование Div

Question

Я хочу, чтобы моя страница выглядела следующим образом:

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

В последней версии FF и Chrome приведенный ниже фрагмент кода работает как следует.Но в IE вывод выглядит следующим образом:

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

Я был бы очень признателен, если бы вы могли дать мне решение без изменения разметки HTML .

Спасибо за ваше время!

Андрей, Швейцария

Answer 1

Попробуйте это:

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

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

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

    }

    #third
    {
        background: Red;
        float: left;

    }
</style>

Вы должны отпустить третий делитель слева и удалить поплавок из второго дел.

Вам не нужно редактировать html, но вам придется переупорядочить div:

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

Это даст вам порядок отображения, который вы ищете.

Answer 2

Я не уверен, какую версию IE вы тестируете, но это правильно отображается в моем IE8. Когда я переключаюсь в режим стандартов IE7 с помощью панели инструментов dev, у меня возникает проблема. Это можно решить с помощью этого CSS:

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

Возможно, вам придется включить это в условный комментарий, так как я не уверен в влиянии на другие браузеры. Вот пример этого.

Answer 3

Здесь это должно работать:

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

Рабочая демоверсия: http://vidasp.net/tinydemos/layout.html

Answer 4

Как насчет этого:

<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

много способов решить.установите ширину обёртки до 1000 пикселей.также вы пробовали float: left; на #third?..и, возможно, такой урок поможет вам: http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/