В IE6 и с использованием divs, как разделить всю страницу на два столбца, оставив div со статической шириной и вправо с эластичной шириной? - PullRequest
Новая
       2

В IE6 и с использованием divs, как разделить всю страницу на два столбца, оставив div со статической шириной и вправо с эластичной шириной?

1 голос
/ 21 декабря 2010

Я не знаю, возможно ли то, что запрашиваемое, возможно даже в IE6, но здесь идет речь: я работаю над макетом страницы и хочу разделить тело на два контейнера div. Я хочу дать левому div фиксированную ширину 200px; делая правильный div упругим по ширине страницы. Левая граница правого элемента должна касаться правой границы левого элемента, чтобы прояснить ситуацию. Я сделал диаграмму:
alt text

Ответы [ 2 ]

2 голосов
/ 21 декабря 2010 
<html style="height:100%">
<body style="height:100%;margin:0px;">
  <div style="position:absolute;left:0;right:0;z-index:1000;height:100%;width:200px;background-color:red;">
    Sidebar
  </div>
  <div style="height:100%;width:100%;">
    <div style="padding-left:200px;background-color:blue;height:100%">
      Content
    </div>
  </div>

</body>
</html>

здесь он-лайн: http://milkish.com/test/ie6.html проверьте это с помощью netrender: http://ipinfo.info/netrenderer/index.php

1 голос
/ 21 декабря 2010

Пример для jsfiddle: http://jsfiddle.net/Damien_at_SF/UhdHu/

HTML: 

<html>
    <body>
        <div id="col_1">
            <p>column 1</p>
        </div>
        <div id="col_2">
            <p>column 2</p>
        </div>
    </body>
</html>

CSS: 

html, body {
     height:100%;
     margin:0;
     padding:0;
     background-color:#000000;
}
#col_1 {
     height:100%;
     position:absolute;
     top:0px;
     left:0px;
     width:200px;
     padding:10px;
     background-color:#DBDBDB;
}
#col_2 {
     height:100%;
     margin-top:0px;
     margin-right:0px;
     margin-left:220px;
     padding:10px;
     background-color:#FFFFFF;
     overflow:hidden;
}

Источник: http://css.flepstudio.org/en/css-box-model/1-column-fixed-1-column-fluid.html

надеюсь, что поможет:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...